大项目前章-8 项目结构搭建

项目技术选型已经确定，我们一步一步搭建我们整个项目，首先确定项目结构，我们有网络接口、程序后台终端、教务处管理后台，协会管理后台、客户端、数据库

客户端

这个是我们可以说最终要的一个端了，因为面向学生用户，最在意的就是颜值还有使用的方便性，我们先分析这个端要完成什么功能，画一张思维导图，主要功能有：融合学校活动，全部协会展示，协会详情，加入协会，学校活动，积分，人工智能等主要功能。

现在我们使用HBilder代码编辑器选择uniapp的空模板创建，去微信开放平台拿取我们的APPkey，这样方便我们调试，组合就是使用HBilder编写代码，使用微信开发者工具编译代码，调试，搭建好的项目其实和vue脚手架搭建的项目结构其实是差不多的，这里如果不会uniapp的可以去B站找一下教程，学个基础就可以做项目了，先把项目初始化，把默认的图标和其他的自带的素材删掉，构建我们的TAB栏，构建五个主页面：首页、活力场、协会林、，资讯台、个人园，并注册页面，至此我们的客户端环境就算是搭建完了

协会管理后台

这个后台使用vue+elementUI搭建的，使用echart图标做的数据可视化，我们之前做了校园社区这个地方就可以是直接拿过来改点些许样式就可以用了，正常搭建就是，使用vue脚手架，市面上有很多的成熟的脚手架了，可以随便使用一个搭建，先下载脚手架：npm install -g @vue/cli，这个需要有点基础(至少知道会安装node环境)：vue create 工程名称

然后等待一会在这个文件下就会有你的项目了，然后也是一样的先初始化项目，npm i 命令下载所有的依赖包，打开通过npm run serve 打开项目，你会发现也有个默认的页面，回到代码，清除这些杂东西，删除，然后搭建路由目录，构建路由文件，构建模拟数据文件夹，分好类，直到打开时白板，就可以开始设计界面了，管理后台肯定是需要左侧菜单的，都千篇一律的样子，教务处也是一样的使用vue脚手架搭建的，就不再多说了，只是权限的差距

网络接口

这个也是使用的脚手架，因为我们之前使用的node编写后端，和数据库mysql打交道，所以我们的脚手架也是挺多选择的，下面举个例子即可快速搭建我们的接口项目结构

# 全局安装 Express 脚手架 npm install -g express-generator

# 创建一个名为 myapp 的项目，使用 pug 作为模板引擎 express --view=pug myapp

# 进入项目目录 cd myapp

# 安装依赖 npm install

# 启动服务 npm start

我使用的不是这个，但是也大差不差了（因为主包也忘了当时用的是哪个脚手架了，很抱歉磕一个），但！！！！！！！！！！

咱们这个项目并不是使用node的呀，我们使用的是ASP.NET搭建的呀，这就是你们不看前几个章节的后果

这个项目搭建就比较的简单了，不涉及到命令了，打开vs，选择

然后分化好目录，这环节如果不熟悉的，多问AI，面向AI编程确实也成为了未来的趋势，特别是这种环境搭建的。然后设计好控制器，搭建三层架构目录，运行成功看见自带的API就算是成功了，我们再把项目初始化，把它去掉写一个自己的接口模拟一下，接口和数据库后面再搭建，先构建前端

数据库

数据库选择的是mysql，这个重要性就不用多说了，我们首先不构建数据库，有些人认为确实，开发程序首先是吧数据定下来，许多公司也是这样设计的，但是我们自己搭建的项目，非常小的团队，没有那么专门的策划和架构师，前端所有的数据暂且先使用模拟数据，后续根据模拟数据搭建数据库，因为前端都还在设计阶段，会多哪些数据都不清楚，比如这里我觉得需要有个级别展示，那我的模拟数据多一行，如果先开发数据库那得不停的改数据库

好啦到现在我们就搭建了基本的项目架构了，下节再见