参考教程:https://learner.blog.csdn.net/article/details/88925013

#安装vue-cli 

参考教程 vue-cli安装

 

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

 

#构建前端项目

vue create wj-vue

cd wj-vue

cnpm install

cnpm install --save axios

cnpm run serve

(一)前后端结合测试——vue+springBoot实战

 

#前端页面开发

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)效果

(一)前后端结合测试——vue+springBoot实战

(一)前后端结合测试——vue+springBoot实战

 

#创建后端项目

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页面

 

 

 

 

 

相关文章:

  • 2022-12-23
  • 2021-09-09
  • 2021-09-03
  • 2022-12-23
  • 2021-11-17
  • 2022-12-23
  • 2021-11-07
  • 2021-10-17
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-30
  • 2022-12-23
  • 2021-10-02
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案