开发场景说明：准备从零开始一个项目时，前后端同时开发。由于时间问题，后端可能无法提供数据，此时需要前端人员模拟数据，如Mock。在外部Vue中，也可以实现mock操作模拟数据。需要对JWT（JsonWebToken）和token有一定的了解。·首先打开Apache和MySQL实现登录部分。第一步：搭建vue基础项目框架，在前端安装npmi--saveaxios，创建登录页面Login
开发场景说明：准备从零开始一个项目时，前后端同时开发。由于时间问题，后端可能无法提供数据，此时需要前端人员模拟数据，如Mock。在外部Vue中，也可以实现mock操作模拟数据。需要对JWT（JsonWebToken）和token有一定的了解。·首先打开Apache和MySQL实现登录部分。第一步：搭建vue基础项目框架，在前端安装npmi--saveaxios，创建登录页面LoginAccount:第二步：导入登录intoroutingandconfigure第三步：使用mock模拟后台数据，在项目根目录下创建一个mock文件夹，打开终端安装npmi--saveexpressaxios，创建两个文件index.js和router.jsindex.js文件constexpress=require("express");constapp=express();constrouter=require("./router")constbodyParser=require("body-parser");app.use(bodyParser.urlencoded({extended:true}))app.use("/api",router)app.listen(3000,()=>{console.log("服务器运行在3000端口");})路由器.js文件constexpress=require("express");constrouter=express.Router();router.post('/login',(req,res)=>{constusername=req.body.username;constpassword=req.body.password;if(username&&password){res.send({msg:"登录成功",code:200})}else{res.send({msg:"登录失败",code:400})}})module.出口=路由器；先用postman测试一下，这样很容易区分是前端出错还是后台出错。如果能成功获取，执行下一步，回到前台，创建utils文件夹，在里面创建request.js并配置//封装网络请求：axiosimportaxiosfrom"axios"importqsfrom"query-string"//错误消息的响应方法consterrorHandle=(status,other)=>{switch(status){case400://请求头和服务器console.log的限制（“服务器不理解请求的语法”）;休息;case401://token校验失败，用户认证失败console.log("(Unauthorized)requestrequiresauthentication");休息;case403://用户身份已过期，服务器请求被限制console.log("(Forbidden)服务器拒绝请求");休息;case404://网络请求地址错误console.log("(notfound)服务器找不到请求的页面");break;default:console.log(other);break;}}//创建axios对象constinstance=axios.create({timeout:5000//请求超时})//全局配置instance.defaults.baseUrl="http://iwenwiki.com";//instance.defaults.headers.common['Authorization']=AUTH_TOKEN;instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';//创建请求拦截和响应拦截操作instance.interceptors.request.use(config=>{//配置if(config.method==='post'){config.data=qs.stringify(config.data);}returnconfig;},error=>Promise.reject(error))instance.interceptors.response.use(//Success/***成功与失败的判断：*1.请求成功与请求失败*2.请求成功：结果成功和结果失败**真正好的代码：*1.可读性高*2.可维护性强*不是日志代码！！！*面向对象的思维方式：OOP*/response=>response.status===200?Promise.resolve(响应se):Promise.reject(response),//我们自己封装了，所以为了代码的清晰度和可读性，我们需要添加Promise//response=>response,error=>{const{response}=error;//ES6解构赋值/***response中包含的信息：*status*data*/if(response){//给出开发者具体的错误信息errorHandle(response.status,response.data);返回Promise.reject(响应);}else{console.log("请求中断或网络断开");}})导出默认实例；创建一个api文件夹，在里面创建base.js存放路径；index.js存放封装的网??络请求//base.js文件constbase={baseUrl:'/api',login:'/api/login'}exportdefaultbase;//index.js文件importbasefrom'./base'importaxiosfrom'../utils/request'constapi={//登录接口getLogin(params){returnaxios.post(base.baseUrl+base.login,params)}}exportdefaultapi;解决跨域问题：在项目根目录下创建vue.config.js配置文件，设置配置项：//vue.config.jsfilemodule.exports={devServer:{proxy:{"/api":{目标:"http://localhost:3000/",pathRewrite:{//改写路径"^/api":""},changeOrigin:true//允许跨域}}}}在Login组件中获取数据methods:{myLogin(){this.$api.getLogin({username:this.username,password:this.password}).then(res=>{console.log(res);})}}实现登录验证部分场景：点击进入about页面验证用户是否登录已登录，如果登录成功则可以进入about页面。如果用户没有登录或者登录不成功，会自动跳转到Login登录页面。有两个知识点token和jwt（jsonwebtoken）。第一步：为about组件设置路由元信息。{path:'/about',name:'About',meta:{isLogin:true},component:()=>import('../views/About.vue')}第二步：后台生成token。在mock文件中创建一个config.js，并配置module.exports={jwtSecret:"somesecrtekeyforjsonwebtoken"//在真实项目中，后台负责}第三步：后台配置路由。后台安装npmi--savejsonwebtoken并配置constconfig=require("./config");constjwt=require("jsonwebtoken");//生成tokenconsttoken=jwt.sign({username:username,密码：密码}，config.jwtSecret）；res.send({...token:token,username:username})第四步：此时前端浏览器可以打印token保存到本地，修改Login组件：