基于VUE+SPRING BOOT实现跨域访问的demo(对用户表的增删改查以及登录) ————前端部分

       在上一篇文章中已经提到，由于下期项目要引入vue的element元素来设计前台页面，于是顺便参考菜鸟教程学了点vue的东西，顺手写了个demo，仅供新手参考。。。

         大家参考上篇大哥的博客相比vue的环境已经搭建好了，项目也已经启动了，接下来就好办了。

        本demo的项目目录如下：

                     common中的是公用组件，home是首页组件，manage是登录与注册组件，router是页面路由，目录基本与博主目录相似。

       

             关于main.js,index.html以及app.vue三者的关系的阐述：

                      

1：main.js是vue 的入口文件，用来实例化vue对象以及加载所用到的其他组件

2：el是一种元素标识的对象，比如上面中的#app就代表id为app的元素对象，用来挂载到vue实列中，template是模板，表示挂载到vue的实列使用模板来进行渲染。components表示挂载组件，名字叫App。router表示路由。

3：综上所述，vue的初始加载顺序为:main.js=>index.html=>App.vue=>router，其实就是所有的组件依托于app.vue,app.vue又依托于index.html来渲染。

关于端口的修改可以在config文件下的index.js中修改，截图如下：

      

下面介绍demo的制作流程：

         1.  在app.vue中大家会发现<router-view/>这个标签，表示所有的路由都在当前组件中展示，与router-link标签相对应。

         2.  关于路由的配置如下:

​

import Vue from 'vue'
import Router from 'vue-router'
import BlogLogin from '@/components/manage/BlogLogin.vue'
import BlogIndex from '@/components/home/BlogIndex.vue'
import BlogRegist from "../components/manage/BlogRegist";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/index',
      name: 'BlogIndex',
      component: BlogIndex
    },
    {
      path: '/manage',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'BlogLogin',
      component: BlogLogin
    },
    {
      path: '/regist',
      name: 'BlogRegist',
      component: BlogRegist
    },
    {
      path: '/cancle',
      redirect: '/login'
    }

  ]
})

[点击并拖拽以移动]
​

3:vue的服务启动时默认的路径为‘/’,所以在配置路由时就让他重定向到登录页面，不然就会显示空白，之所以需要使用重定向，那是因为vue是不允许多个路径跳转到同一个页面的，一个路径只能跳转到一个页面，并且同一个组件不能重复进行定义，如果需要多个路由跳转到同一个页面就需要使用重定向。

4： 关于 router-link的说明，router-link类似于html的link，以to属性来静态或动态绑定所要跳转的路由。（本demo中的多个地方会用到）

5：关于axios的跨域异步访问方式如下:

           post/put方式：

this.$axios.post(path, params.then(Reponse => {
          //then表示成功之后的回调函数。
          // reponse大家可以打印出来自己看一下，是一个http的响应对象，里面的data属性才是我们后台的返回信息。
          this.$router.replace("/login")//之所以用replace方法来进行跳转，是因为replace方法不往路由访问历史栈中添加，所以你点击浏览器的回退按钮是不会有反应的。
        })

[点击并拖拽以移动]
​

       get/delete方式：

             get的请求方式如下两种都可以，但是一般建议使用第二种。

​

 this.$axios.get('/login/logininfo?username='+this.loginInfoVo.username+'&password='+this.loginInfoVo.password)
          .then(successResponse => {


}
this.$axios.get('/login/logininfo，{params:{})
          .then(successResponse => {


}

​

6.关于路由跳转的几种js方式的说明：replace,go,.push.可以参照这位博主的博客：（https://blog.csdn.net/qq_38614249/article/details/79564563）。摘要如下：

    需要回退历史使用 push，不需要使用replace,需要回退指定历史页，使用go. 其中大家应该也发现了，还有一种带参查询的跳转，在后面会做出阐述。

本demo的页面元素均使用的是element-ui,在main.js中已添加。关于element-ui可参考（http://element-cn.eleme.io/#/zh-CN/component/layout）

    各个组件的源码稍后我会贴出demo的git地址，大家可自行参考。

下面来说一说在本次demo的编写中遇到的一些问题（新手角度阐述，如有不对还请指正。）

        1：关于在页面跳转时样式的加载变形，在idea中初建vue组件时，每一个style块中都有一个scope属性，刚开始不明所以，于是就把所有的scope去掉了，最后导致了页面样式的变形。

       scope表示域，表示样式只在当前组件的范围应用，不受父组件样式的渲染，如果不加，则父组件的样式则会污染子组件的样式。使用了scope之后，所有的样式加载都会包含一个特殊的额id来供vue识别。

       2： 关于父子组件的问题，本demo中的header组件和side组件就是父子组件，login组件和head组件也是父子组件的关系。

本demo的一大难题就是父子组件的传值，本demo中为了实现添加用户信息之后刷新列表的效果，需要使用父子组件传参（大家也可以将其写到一个组件中，就不用传参了，学习嘛，多经历一点还是好的）。在子组件中使用props来接受列表参数渲染列表，但是遇到了一个大炕，其一就是在mount方法中得到的参数为underfind,然后使用得到的参数来为data域中的列表值赋值，赋值成功之后发现列表依旧没有渲染，于是百度了一天，网上说到的赋值方式几乎全部都使用了（什么监听，set的统统试过了），依旧还是没反应，最后请教了一位懂vue的同学才得以解决，但发生上述问题的原因他也百思不得其解。解决方案如下:

            

在父组件填充子组件的变量时，由于是数组，假如v-if来表示datatable不为空时再渲染数据。

3.关于上面说到的replace等方法的带参查询，本demo在用户登录成功之后需要获得用户的登录姓名，所以在登录成功之后需要带参访问主页，如下形式：

this.$router.replace({name: 'BlogIndex',params:{username:this.loginInfoVo.username}})

注意此处不能使用path来指定跳转路由，只能使用name来标识跳转组件，如果想要使用path来跳转，可以在router-link中使用，写法同上。子组件取值如下:

 this.$route.params.username;

注意，此处是route不是router,route代表当前的路由，router指的是路由对象，包含全局路由的属性信息（大家可以打印出来看看就知道了）。

 哎，制作过程中遇到了好多的问题，但不知道为啥，写博客却写不出来！！！！！！！！

github地址：https://github.com/MrLi2018/firstdemo