前面后台服务已经搭建好了 同时要安装mongoose blueimp-md5,body-parser
-------------------------------------------------------------
一:后端
接下来就要写curd数据库里面的内容了------前台给你一个数据 如果你的后台没有就要放到数据库里面,同时告诉你注册成功了
1:启动mongdb,然后在curd里面创建一个数据库 (上官网搜索mongoose直接定义模型 粘贴复制)改名字改成b0352stu后台数据库就创建好了,表名也改一下叫User
同时在里面定义一个规则对象(数据库里面的规则)
2:在路由中引入这个数据库,进行判断 进入 首先在这里要拿到前台提交上来的数据
然后进行数据库查询判断用户名或者昵称是否存在,然后判断如果err存在就响应注册后端服务器错误,如果数据存在查询到了数据,不允许注册,如果后台不存在证明可以注册先生成一个token(令牌)把你传进来的用户名进行md5加密变成一个字符串在拼接一个字符串在加密-----两层加密
在将新用户数据存储到数据库当中(这里面也有err存在 就是存储失败,,如果没有就是成功储存)
-----------------------------------------------------------------------------注册接口就写完了,前台就应该访问这个接口了 前台用api然后用axios发送请求使用这个接口进行注册
二:前台
1:在api里面创建一个user.js,这里面操作登录和注册的,先引入request.js 导出register同时接受用户名 密码 账号 还要写访问的url这里写和后端一定要相同的 获取方法也要写一下 获取什么也要写
2:在index.vue组件中 引入api 要按需引入user.js这里需要注册 引入request.js
同时在这里的定义好的提交按钮里面成功提交成功的方法里面调用request方法 然后成功获取信息 进行判断,如果resp.flag为true就证明注册成功跳转登陆页面(还没写)否则就会 有else出现错误提示
到这为止 注册就成功实现了。
-----------------------------------------------------创建登录组件,配置前端路由,如果访问login就访问登陆的这个组件,再写后台登录接口,最后在写登录组件里面写api登陆的方法,再在前台组件里面调用这个方法,走的就是登录功能,登陆成功之后就会返回一个token,拿到这个令牌再去调用后台获取用户信息的接口,成功之后登录流程就结束了。
三:前台
1;再view下创建login文件夹,再创建一个index.vue ,也在路由文件夹里面的index.js里面写出登录path,name 还有组件component---------这时访问login可以进入这个页面了
这时候要再注册成功之后跳转登录页面 在register里面的刚写完的如果flag存在就跳转里面写跳转登录的地址
2:成功访问登录之后就要进行登录页面的搭建---从ui里面找表单在进行改动,同时在data和method里面定义事件和方法 在rules里面进行表单校验 这样一个登录页面就写好了-----与注册页面差不多。
-------------然后就要在按钮那里发送请求(首先要有后台login接口)
四:后台
1:在router.js里面写出登录接口,User是curd数据库里面的
写完这个要写前台,才能访问正确与否----前端发送用户名和密码 后端判断是否能够匹配上进行查询,成功之后拿到token令牌,前端接收到了根据token令牌在发送一个请求获取用户信息,就显示到页面上
2:在写一个获取用户信息的接口,拿一个令牌直接就获取了,所以这个获取方法就用get就可以了
五:前台
1:在api里面user里面写登录和用户信息的接口,里面要接收username password 然后写接口 url:(login)和method:(post)和数据类型
2:获取用户信息的---------接收token--------
3:然后再登录组件中调用这两个api 先按需引入这两个api
用户信息api在表单校验成功里调用 先获取用户信息然后判断用户信息里面的令牌然后then
用户信息等于传过来的数据 然后进行flag判断 有flag获取用户信息成功,用户信息和token要在本地储存一下,否则刷新页面就没了
然后就登录成功前往首页path“/“
否则用户信息发生错误,登录发生错误
---------------------------------------这时候输入登录的用户信息就可以储存到本地了----------------要就要进行开发首页了。