前后端分离的web项目开发总结（完整课设的创作过程）_web编程之前后端整合的实验报告,包括前后端分离、接口定义、打包前端项目、配置跨

Vue的vscode环境配置及插件推荐

环境配置

1.去官网下载安装Node.js，根据自己的电脑型号选择合适的版本下载，选择LTS模式下的。然后下载完成后无脑下一步就行，安装过程会自动配置好环境变量。安装完成后可以打开命令端口输入node -v和npm -v分别查看安装的node和npm（包管理器，类似pip，node自带）的版本，出现版本号代表安装成功。
2.安装cnpm（除了下载地址和npm不一样其余都一样的，可以互相代替），npm安装插件是从国外服务器下载，使用淘宝的来下载插件。输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org，完成后输入cnpm -v可查看到相关版本信息。
3.安装webpack（js应用程序的静态模块打包器）
因为Vue组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包成为.js文件，而webpack就可以实现该功能。输入cnpm install webpack -g安装。
4.安装vue-cli（用来生成vue模板的工具，但是初学vue不要直接上手vue-cli） vue-cli这个构建工具可以降低webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器（意思就是运行的页面可以向后端发放指令）。vue-cli就是一个脚手架，就是用配置好的模板快速搭起一个项目来，省去配置webpack的基本内容。通过vue init 模板名和项目名，然后几个设置就能搭建起来一个项目。
输入cnpm install vue-cli -g 安装。
5.环境已经差不多配置完成，新建一个项目来检验一下。重新代开命令行界面。

• 首先，新建一个VueProject文件夹来专门储存vue项目
• 在命令行进入该文件夹下，用 cd 指令进入
• 输入vue init webpack text1新建一个名为text1的项目
• 然后会回车或者输入y/n来操作一下，最后一步注意选择第三个选项（为了使用cnpm下载，快速），如下图所示
  

完成创建后目标目录下就会显示刚刚创建好的文件夹，如下图

然后在命令行中cd text1目录下，输入cnpm install下载安装项目的依赖，完成后就会发现text1目录下多出来一个node_modules文件夹，专门用来储存项目依赖的，如下图所示

输入cnpm run dev命令（用npm run dev是一样的）后会给出提示让我们在浏览器通过http://localhost:8080（通过本地服务器端口8080来访问运行的项目结果），最后打开的页面如下图

vscode相关插件和环境配置

首先安装两个很重要的插件，

• vetur，vue语法的插件
• eslint，智能错误检测以及格式化
  配置VueProject文件夹下vue编写环境的设置文件，settings.json

{
   "editor.detectIndentation": false,
 "editor.tabSize": 2,
 "prettier.tabWidth": 2,
 "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
 "prettier.semi": false, //去掉代码结尾的分号
 "prettier.singleQuote": true, //使用带引号替代双引号
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
 "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
}
1
2
3
4
5
6
7
8
9
10
11

课设总结

课设做的是基于web的收藏夹管理系统（前后端分离，vue来书写前端，python语言来书写后端，最后运行在服务器上），分为以下几步来实现。

• 首先mysql安装，navicat来搭建数据库以及学习基本的sql语句
• 编写flask框架的后端代码，使用postman来进行调试检验效果。
• 其次利用vue.js来编写后端实现前后端连接，最后将前端工程打包
• 构建云服务器，可以购买阿里云服务器（新用户可以免费试用），使用宝塔在云服务器上搭建python运行环境，数据库，以及网站。特别注意设置宝塔和阿里云实例里面端口权限的开放，开启端口，且面向所有人开放
  推荐学习资料：
  第一项学习视频
  第二项学习视频
  第三项学习视频
  第四项学习视频：先基础学习学习完成前四个课时，然后在看后续操作