自我理解思考

先用vue create 项目 然后进行这就可以启动项目了，在src下创建api里面放请求方法，然后在views里面放路由组件，Component里面放普通组件，assets放一些公共资源

store里面（有modules文件夹，user.js)里面写的是利用api里面的方法state和actions和mutations，进行对数据的修改，其中，actions可以发送请求，然后最后导出这个对象state，mutions，state，）然后再module同级别有是创建的vue仓库，我们再这里要用一下module模块才能生效。

main是项目的入口，在这里我们可以引入我们各种要用的文件，最先加载的就是他

permission校验的，自己创建的，vue.config里面写服务的端口号，还有https协议的关闭，还有代理跨域啊，还有主机名等

 

到这就是前台文件的介绍，现在要知道你自己创建项目的步骤了，自己安装axios，elementui，

先想好，那首先我创建一个项目之后，我就要想他的url地址然后我就在vue前端文件夹里面vue.config配置了一个服务，里面设置这个地址的信息，然后现在请求是必不可少的所以我们要封装一个axios方法，里面创建一个axios对象，然后设置基本路径，还有请求拦截器还有响应拦截器等，然后就是想既然请求已经封装好了，那我前后端产生跨域怎么办？所以接下来就像解决这个跨域，所以我配置两个环境变量，然后在vue配置中proxy代理用这个环境变量代理了一个标识符，同时我也设置一个要代理到哪去的sever_api：（这里写上后台的地址）同时我在我封装的axios请求上把baseurl换成这个标识符（这样我每个前端路径去访问后端都会加上这个标识符，然后利用这个 proxy代理的target：添加代理的环境变量吗，这样我就访问的时候就可以完成了，但是我还需重写下把标识符去掉要不然前端一直就带着标识符了。ok了到这，我已经解决了前后端跨域的问题，那么我接下来该怎么办呢，接下来就该想怎么进行登录页面的搭建吧？

登录页面是路由组件所以我放到view里面，然后我在里买那写一个login.vue然后用vv2然后再模板element-ui里面的东西去搭建基础页面，然后删删改改，什么表单的校验啊，该定义的也要定义一下，然后登录的方法提交再methods里面进行提交，这样一个基础页面我就搭建好了，前台登录页面搭建好了，我得配后端服务了吧？所以开始配后端服务，

先创建一个文件夹，然后安装package.json出来，然后在安装什么MD5啊，还有获取post请求的数据的body_paser,还有最重要的express，还有moogose然后我就再后台app.js里面去搭建的web服务端，里面先引入moogose，和express，然后还要创建一个express的app对象，再创建app对象的时候，就赋予了app对象可以使用express中间件的作用，通过app.use获取post数据的语句，还有app.listen设置端口号，以及后端是否服务连接成功，和开放path路径以及node_modules的路径，然后最重要我要在app.js这个里面去用mongoose去连接数据库，然后进行输出我的数据库是否连接成功，成功就启动端口号说后台服务启动成功了。然后数据库连接成功了，我又在想，数据库里面没有数据怎么办？所以我要在创建一个数据库里面创建一个表，新建一个Modules里面放我写的表的内容规则，然后同时在这个文件里面配置一个超级管理员admin。

这时候我发现没有后台路由，所以我要开始配置后台路由了。

在后台下创建一个router.js的路由文件夹，然后在这里写，我弱国访问一个登录的路径了，并且，我接收到了前台用户传给我的用户信息，我就要和数据库表中进行查询，然后我就判断，如果我数据库里面有，好了，我给你一个成功status，并且把数据返回给前台。

然后我这时候想，后端路由服务已经配置好了，

然后数据库已经搭建好了吧，后端服务也已经搭建好了，我现在就可以用前台来请求后台端口了吧？

我们前台设置了一个路由，然后这个路由，这个路由写了这个路径还有应用的组件，同时我还在想那我，本地缓存和判断这个账号存不存在在哪判断或者缓存啊，所以我在utils里面创建了两个新的文件一个用来进行判断这个用户是否登陆过另一个进行这个本地储存（里面写缓存数据，获取数据，和登录数据的方法）。

到这为止。我现在前台路由已经搭建好了，后台数据库也已经搭建好了，后台路由也创建好了，所以我可以发送请求了吧？

利用vuex进行请求发送。首先在他的user.js里面写这几个传参的模块，设置一个 state啊里面有数据，然后moutions可以修改，通过actions进行触发，actions里面通过dispath接收到这个用户名和密码然后可以通知login api方法，然后我在触发这个前台路由的时候，后台路由会根据你传过来的参进行判断，如果是数据库有的就返回给你一个正确的，然后你的路由就可以正常跳转了。

但是在这中间我又在想，我没设置缓存，然后岂不是，我刷新，我刚登陆的信息又没了，得重新登，所以不可以，我要找到这个缓存进行数据刷新也不丢。

在缓存的文件夹里面定义一个user-key钥匙，然后，我在保存数据的时候只调用这一个变量就可以了，方便修改。然后进入真正的缓存不丢失。

我既然想缓存，所以我就让他在submit登录成功的时候去缓存一下，让meomoryUtils和storageUtils都进行缓存一下，在跳转。然后再在入口main文件里面去先获取一下storageUtils（这里放的是内存），如果存在就往memoryUtils里面存一下，这样浏览器重新打开就不会变为空了。

然后这时候又有问题，我没有输入登录信息，我直接再地址上打/也能进去解决一下不登陆就进去的问题，就通过我要在前台创建一个校验文件，然后通过路由守卫去再路由跳转之前进行判断，如果你有用户信息你想去主页，随你，但是你要是想去登录页，不可以，直接去主页，因为已经存在了，同理，没有用户信息也是这样进行判断。

 

以上全部都是自我理解，有不对可以评论