（一）前后端结合测试——vue+springBoot实战

参考教程：https://learner.blog.youkuaiyun.com/article/details/88925013

#安装vue-cli 

参考教程 vue-cli安装

#安装lombok

lombok介绍

 

最好每做几步，就进行测试，以便更好地定位问题

 

#构建前端项目

vue create wj-vue

cd wj-vue

cnpm install

cnpm install --save axios

cnpm run serve

 

#前端页面开发

1）新建Login.vue

2)新建AppIndex.vue

3)设置反向代理

4)配置页面路由

5）设置跨域支持

Vue Cli4解决跨域问题
解决办法：
只需要在后台方法前加一个@CrossOrigin注解就可以解决
 

6）运行项目

 

Q:把项目从虚拟机复制到本机，再运行时出错

A：把node_modules删除，重新下载依赖

 

** <router-link to=' '>的路径要与router的path路径对应

<router-link to="/about">About</router-link>

要与

  {
    path: '/about',
    name: 'About',
    component: About
  }

匹配

7）效果

 

#创建后端项目

1）IDEA新建项目，spring Initializr ——>next

2）输入项目元数据，Next

3)web——>spring web, next

4)finish

5)运行Application.java

 

 

#后端开发

1）User类 --------接收对象

2）Result类-------响应

3）LoginController类-----处理响应

4）配置端口

5）测试项目

同时启动前端和后端

前端login页面输入用户名admin,密码123456

点击登录，自动跳转到index页面