• 欢迎来到本博客,希望可以y一起学习与分享

使用vue-cli3+express搭建一个简易后台

JavaScript/Jquery benz 3年前 (2019-02-15) 147次浏览 0个评论 扫描二维码
文章目录[隐藏]

后端

1、初始化项目

新建一个文件夹,作为一个项目,我建立了一个名为cli3的文件夹作为项目。

在cli3目录里,使用 npm init 指令创建项目描述文件 package.json。

命令行里会以交互的形式让你填一些项目的介绍信息,依次介绍如下:(不知道怎么填的直接回车、回车…)

  • name 项目名称
  • version 项目的版本号
  • description 项目的描述信息
  • entry point 项目的入口文件
  • test command 项目启动时脚本命令
  • git repository 如果你有 Git 地址,可以将这个项目放到你的 Git 仓库里
  • keywords 关键词
  • author 作者叫啥
  • license 项目要发行的时候需要的证书,平时玩玩忽略它


就会在cli3目录下生成package.json文件。

2、创建入口文件server.js

因为指定入口文件为server.js,所以在cli3目录创建server.js文件。

3、安装express

使用命令:npm install express安装express

4、使用express

在server.js文件里这样写:

使用命令:node server.js启动。express就可以运行了,浏览器访问localhost:5000就可以访问到内容

5、安装nodemon 作为守护

因为每次修改代码,都要手动重启node,修改后的代码才能生效,所以使用nodemon来自动重启。使用命令:npm install nodemon -g全局安装nodemon。
使用nodemon代替node启动server.js:nodemon server.js

6、修改命令启动脚本

打开package.json,”scripts”字段可以修改启动命令:

命令行行执行命令:npm run server

7、使用在线MongoDB,安装mongoose管理MongoDB

到mlab网站上申请在线MongoDB,申请流程这里不叙述。
使用命令:npm install mongoose安装mongoose,

8、使用mongoose

这里的mongoURI放到了一个config目录的keys.js文件里,方便管理:

9、路由管理

在项目目录建立routes的文件夹,用来存放路由文件,再在routes的文件夹里建立名为api的文件夹,用于存放api路由规则。在api文件夹里建立名为users.js的文件,编写user相关的路由规则。

回到server.js来使用自定义的路由文件:

浏览器访问localhost:5000/api/users/test,就会访问到数据

10、MongoDB的操作

在项目创建名为models的文件夹,用来存放数据模型,在models的文件夹下创建名为User.js作为user表(MongoDB不叫表)的数据模型:

11、安装body-parser

Express中间件body-parser,在http请求种,POST、PUT、PATCH三种请求方法中包含着请求体,也就是所谓的request,在Nodejs原生的http模块中,请求体是要基于流的方式来接受和解析。
body-parser是一个HTTP请求体解析的中间件,使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体。
使用命令:npm install body-parser安装body-parser。
回到server.js,我们要使用body-parser:

这时回到文件:routes/api/users.js,编写用户注册的路由:

POST访问:http://localhost:5000/api/users/register:

就会在控制台接收到数据:

注意:body-parser的使用代码,是紧跟在express监听listen()方法后的,否则可能接收不到数据

12、密码需要加密,安装bcrypt

使用命令:npm install bcrypt安装bcrypt
加密数据:

密码对比:

13、注册并把数据存入MongoDB


数据保存成功,在控制台输出MongoDB入库的数据,如下图:

14、登录校验与生成token

jwt作为token,需要安装jsonwebtoken生成jwt,使用命令:npm install jsonwebtoken安装jsonwebtoken。
在需用用到jwt的地方,引入即可:const jwt = require('jsonwebtoken');//引入jsonwebtoken

15、token验证

token(jwt)验证需要passport-jwt、passport,执行命令:npm install passport-jwt passport安装passport-jwt、passport。
回到server.js,引入passport并初始化passport:

在config文件夹里创建passport.js文件:

回到路由文件:D:\php_project\cli3\routes\api\users.js:

最后,访问http://localhost:5000/api/users/current,在header设置字段Authorization,其值为token,返回数据证明成功。

16、数据与数据的增加、查询

在models文件夹下,创建一个数据模型profile,用来表示数据表:

再到routes/api文件夹下新建profiles.js文件 :

最后到入口文件server.js声明声明一下:

至此后端搭建已完成。

前端 使用vue-cli3搭建vue

1、使用vue-cli 3 搭建项目

在cli3目录下使用命令:npm install -g @vue/cli全局安装vue-cli 3。
使用命令:vue create client搭建一个名为client的项目。这时候有交互,选择babel、router、vuex这三个就可以了。
最后按提示使用命令:cd client 进入项目,并且使用命令:npm run serve,启动vue,打开网址,就可以看见vue的初始页面。

2、前后端的连载

前端有它自己的启动命令,后端也有自己的启动命令,这里的所谓的前后端连载,就是一条命令调用启动前后端的启动命令。
在cli3文件夹下(也就是整个项目的根目录),使用命令:npm install concurrently,使用concurrently来使多个终端的启动绑定在一起。
修改脚本:
client文件夹为前端的目录,其下有一个package.json,在”scripts”里写上client的启动命令:"start": "npm run serve"

同理,在后端的package.json也写了后端的启动命令:"server": "nodemon server.js",现在的目标是在启动后端的同时,启动前端,实现前后端连载。在启动后端并启动前端的时候,应该注意检查前端的依赖是否安装完成:"client-install": "npm install --prefix client",其中--prefix client,是指定路径,还有的就是准备启动前端的命令:"client": "npm run start --prefix client",同理,--prefix client也是指定路径。最后重点来了,使用concurrently实现前后端启动命令的连载(批量执行):"dev": "concurrently \"npm run server\" \"npm run client\""

最后,输入命令:npm run dev即可实现前后端连载。

3、vue目录文件结构简介与得到空白的页面

vue目录文件结构简介如下面:

按照以下步骤得到空白页面:
把assets目录下的logo.png删除
把components目录下的HelloWorld.vue删除
把views下的About.vue、Home.vue删除
打开App.vue,把这段代码删除:

并且把样式删除。
打开router.js把import Home from ‘./views/Home.vue’ 删除,routes的数组里的对象全都清空。

4、重置浏览器的默认样式

打开网址:https://meyerweb.com/eric/tools/css/reset/,下载reset.css。
在public目录下,新建css文件夹,把reset.css文件放到css文件夹里面去。
打开public文件夹下的index.html引入reset.css:

5、安装element-ui

打开前端目录:cd client,使用命令:npm install element-ui安装element-ui
打开入口文件main.js,引入element-ui并声明使用:

6、使用vue的基本流程

在views文件夹创建vue文件,比如,创建Login.vue,其模板如下:

然后到router.js,定义路由:

7、路由的重定向

访问“/”转跳到首页“/index”:

8、访问不存在的路由,全都显示404页面

9、vue 引入css文件

10、使用axios请求

在client目录下,使用命令安装axios:npm install axios
使用axios的拦截功能:
在main.js同级下创建http.js,里面编写axios拦截代码:

最后把axios挂载到vue上面去,全局使用:
打开main.js:

例子:
加载动画和消息提醒:

token的处理:

11、vue 3 处理跨域请求

与vue2不同,vue3处理跨域请求,必须在一个名为vue.config.js的文件定义,所以,在和package.json同级目录创建vue.config.js:

12、路由守卫

有些路由,是要一定的条件才能访问的,比如,首页的路由必须要登录才能访问,直接访问是不能访问的,只能强制转跳到登录页面。这就需要路由守卫。
在router.js里:

13、解析token

登录成功后,拿到了服务器的token,前端需要把token解析成数据。解析token需要借助jwt-decode,在client目录下,使用命令:npm install jwt-decode安装jwt-decode。
jwt-decode的使用:

14、把token解析后的数据存放到vuex

打开store.js,这里是vuex的定义文件。

15、vuex数据刷新丢失的问题

这是因为根主键没有判断,打开根主键App.vue,编写判断:

16、父子组件通讯与子组件调用父组件方法

这里以弹出层为例。

父子通讯:
先在子组件定义好接收的数据:

父组件:

子组件调用父组件的方法,比如,弹出层添加完数据,关闭弹窗的同时调用父组件的方法刷新父组件的数据。
子组件:

父组件:

17、element-ui的分页

踩坑

1、nodejs 提示‘xxx’ 不是内部或外部命令解决方法

一般出现这样的问题原因是npm安装出现了问题,全局模块目录没有被添加到系统环境变量。
Windows用户检查下npm的目录是否加入了系统变量PATH中,如果不存在需要手动添加,添加之后需要重新启动CMD控制台。

nodejs模块全局目录环境变量
npm目录可以使用npm命令去查找:npm config get prefix


文章 使用vue-cli3+express搭建一个简易后台 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!