前后端分离之Vue

Posted 赵云个人中心

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后端分离之Vue相关的知识，希望对你有一定的参考价值。

Vue环境配置

一、软件安装

1.Node.js的安装

Vue环境运行依赖Node.js,首先安装Node.js.Node.js的官方网站https://nodejs.org/en/download/，选择对应的版本下载，本文的环境为Windows 64位，选择Windows Installer(.msi) 64安装，按照提示安装即可。安装结束可检测是否安装成功

node -v

2.安装npm

npm（node package manager），通常称为Node包管理器，顾名思义，主要功能就是管理node包，包括：安装、卸载、更新等等。这里采用淘宝的镜像，相比国外的镜像，下载速度能更快一点

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看时候安装成功

3.安装vue-cli

npm install vue-cli -g

安装结束后，可用vue -V检测版本信息，查看是否安装成功

4.安装webpack

npm install webpack -g

二、创建Vue项目

采用的是Vue指令，生成Vue项目，创建的流程如下

在合适的文件夹位置选择以cmd窗口运行


  
    
    
  
     
   
  1. //创建一个基于webpack新项目
    2.  
   
  2. 1.vue init webpack first-vue
    3.  
   
  3. //Enter进入下一步，按照指示选择相应的选项
    4.  
   
  4. 2.cd first-vue//进入生成的项目文件
    5.  
   
  5. 3.npm run dev //以生产环境启动项目
    6.  
   
  6. 4.http://localhost:8080 //浏览器登陆验证
    7.

生成的目录结构

前后端分离之Vue

三、界面成功效果

前后端分离之Vue

四、安装问题解决

1.-4048错误码，权限问题


  
    
    
  
     
   
  1. npm ERR! path F:\2018毕业论文\vueproject\my-vue\my-first\node_modules\fsevents\n
    2.  
   
  2. ode_modules\getpass\node_modules
    3.  
   
  3. npm ERR! code EPERM
    4.  
   
  4. npm ERR! errno -4048
    5.  
   
  5. npm ERR! syscall scandir
    6.  
   
  6. npm ERR! Error: EPERM: operation not permitted, scandir 'F:\2018毕业论文\vueproj
    7.  
   
  7. ect\my-vue\my-first\node_modules\fsevents\node_modules\getpass\node_modules'
    8.  
   
  8. npm ERR!  { Error: EPERM: operation not permitted, scandir 'F:\2018毕业论文\vuep
    9.  
   
  9. roject\my-vue\my-first\node_modules\fsevents\node_modules\getpass\node_modules'
    10.  
   
  10. npm ERR!   stack: 'Error: EPERM: operation not permitted, scandir \'F:\\2018毕业
    11.  
   
  11. 论文\\vueproject\\my-vue\\my-first\\node_modules\\fsevents\\node_modules\\getpas
    12.  
   
  12. s\\node_modules\'',
    13.

解决办法：


  
    
    
  
     
   
  1. 直接用命令清理缓存就行，
    2.  
   
  2. npm cache clean --force
    3.

2.找不到modules错误


  
    
    
  
     
   
  1. Module build failed: Error: Cannot find module 'stylus'
    2.  
   
  2. at Function.Module._resolveFilename (module.js:489:15)
    3.  
   
  3. at Function.Module._load (module.js:439:25)
    4.  
   
  4. at Module.require (module.js:517:17)
    5.  
   
  5. at require (internal/module.js:11:18)
    6.  
   
  6. at Object.<anonymous> (D:\project\sell\node_modules\_stylus-loader@2.5.1@sty
    7.  
   
  7. lus-loader\index.js:2:14)
    8.

解决办法，单独安装对应的模块

npm install stylus@latest

五、相关链接

Springboot整和Vue，实现前后台的分离，可参考

前后端分离之Vue（二）前后端整合http://blog.csdn.net/shenbug/article/details/79542717

前后端分离之Vue(三) Vue爬过的那些坑 http://blog.csdn.net/shenbug/article/details/79547171 

前后端分离之Vue（二）前后端结合

置顶 2018年03月13日 20:10:13 阅读数：4398


版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shenbug/article/details/79542717

前后端的结合

前言：前后端分离趋势越来越明显，分离的好处在于前后端可独立进行开发进行，前端写前端的代码，后端写后端的代码，后端提供相应的数据接口提供给前端。本文采用的是Vue+springboot的结合，做了一个登陆的demo，主要是理解前后端如何结合在一起，这里演示的为前后端在各自的服务器上运行，可参考前后端分离之Vue（一）Vue环境搭建，建立Vue项目 

一、后端服务器的开发

后端采用的是SSM的框架结构进行改造，将前端部分交由Vue看来完成，只负责请求处理。这里只列举变化的部分，不变的部分springboot搭建的SSM结构即可，具体后端代码可参看https://github.com/dgyuanjun/SpringBoot-Vue.git

1.跨域的处理


   
     
     
   
     
    
  1. import org.springframework.context.annotation.Bean;
    2.  
    
  2. import org.springframework.context.annotation.Configuration;
    3.  
    
  3. import org.springframework.web.cors.CorsConfiguration;
    4.  
    
  4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    5.  
    
  5. import org.springframework.web.filter.CorsFilter;
    6.  
    

    7.  
    
  7. /**
    8.  
    
  8.  * @author Administrator
    9.  
    
  9.  * @create 2018/3/12-15:17
    10.  
    
  10.  * @DESCRIPTION 跨域系统配置
    11.  
    
  11.  */
    12.  
    
  12. @Configuration
    13.  
    
  13. public class CorsConfig {
    14.  
    
  14. /**
    15.  
    
  15.      允许任何域名使用
    16.  
    
  16.      允许任何头
    17.  
    
  17.      允许任何方法（post、get等）
    18.  
    
  18.      */
    19.  
    
  19. private CorsConfiguration buildConfig() {
    20.  
    
  20. CorsConfiguration corsConfiguration = new CorsConfiguration();
    21.  
    
  21.  
    
  22.  
    
  23. corsConfiguration.addAllowedHeader("*");
    24.  
    
  24. corsConfiguration.addAllowedMethod("*");
    25.  
    
  25. // allowCredential 需设置为true
    26.  
    
  26. corsConfiguration.setAllowCredentials(true);
    27.  
    
  27. return corsConfiguration;
    28.  
    
  28. }
    29.  
    

    30.  
    
  30. @Bean
    31.  
    
  31. public CorsFilter corsFilter() {
    32.  
    
  32. UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    33.  
    
  33. source.registerCorsConfiguration("/**", buildConfig());
    34.  
    
  34. return new CorsFilter(source);
    35.  
    
  35. }
    36.  
    
  36. }
    37.

2.统一API响应结果封装


   
     
     
   
     
    
  1. import com.alibaba.fastjson.JSON;
    2.  
    
  2. /**
    3.  
    
  3.  * @author Administrator
    4.  
    
  4.  * @create 2018/3/12-14:31
    5.  
    
  5.  * @DESCRIPTION 统一API响应结果封装
    6.  
    
  6.  */
    7.  
    
  7. public class RestResult {
    8.  
    
  8. private int code;//状态码
    9.  
    

    10.  
    
  10. private String message;//消息
    11.  
    

    12.  
    
  12. private Object data;//数据
    13.  
    
  13. get.set方法
    14.  
    
  14. }
    15.

3.响应码的枚举


   
     
     
   
     
    
  1. /**
    2.  
    
  2.  * @author Administrator
    3.  
    
  3.  * @create 2018/3/12-14:33
    4.  
    
  4.  * @DESCRIPTION 响应码枚举，参考HTTP状态码的语义
    5.  
    
  5.  */
    6.  
    
  6. public enum ResultCode {
    7.  
    
  7. SUCCESS(200),//成功
    8.  
    
  8. FAIL(400),//失败
    9.  
    
  9. UNAUTHORIZED(401),//未认证（签名错误）
    10.  
    
  10. NOT_FOUND(404),//接口不存在
    11.  
    
  11. INTERNAL_SERVER_ERROR(500);//服务器内部错误
    12.  
    

    13.  
    
  13. private final int code;
    14.  
    

    15.  
    
  15. ResultCode(int code) {
    16.  
    
  16. this.code = code;
    17.  
    
  17. }
    18.  
    

    19.  
    
  19. public int code() {
    20.  
    
  20. return code;
    21.  
    
  21. }
    22.  
    
  22. }
    23.

4.接口响应信息生成


   
     
     
   
     
    
  1. import org.springframework.stereotype.Component;
    2.  
    

    3.  
    
  3. /**
    4.  
    
  4.  * 工厂模式
    5.  
    
  5.  * 接口信息生成工具
    6.  
    
  6.  * 。@Component 添加到Spring组件中
    7.  
    
  7.  * Created by bekey on 2017/12/10.
    8.  
    
  8.  */
    9.  
    
  9. @Component
    10.  
    
  10. public class ResultGenerator {
    11.  
    

    12.  
    
  12. private static final String SUCCESS = "success";
    13.  
    
  13. //成功
    14.  
    
  14. public RestResult getSuccessResult() {
    15.  
    
  15. return new RestResult()
    16.  
    
  16. .setCode(ResultCode.SUCCESS)
    17.  
    
  17. .setMessage(SUCCESS);
    18.  
    
  18. }
    19.  
    
  19. //成功，附带额外数据
    20.  
    
  20. public  RestResult getSuccessResult(Object data) {
    21.  
    
  21. return new RestResult()
    22.  
    
  22. .setCode(ResultCode.SUCCESS)
    23.  
    
  23. .setMessage(SUCCESS)
    24.  
    
  24. .setData(data);
    25.  
    
  25. }
    26.  
    
  26. //成功，自定义消息及数据
    27.  
    
  27. public  RestResult getSuccessResult(String message,Object data) {
    28.  
    
  28. return new RestResult()
    29.  
    
  29. .setCode(ResultCode.SUCCESS)
    30.  
    
  30. .setMessage(message)
    31.  
    
  31. .setData(data);
    32.  
    
  32. }
    33.  
    
  33. //失败，附带消息
    34.  
    
  34. public  RestResult getFailResult(String message) {
    35.  
    
  35. return new RestResult()
    36.  
    
  36. .setCode(ResultCode.FAIL)
    37.  
    
  37. .setMessage(message);
    38.  
    
  38. }
    39.  
    
  39. //失败，自定义消息及数据
    40.  
    
  40. public RestResult getFailResult(String message, Object data) {
    41.  
    
  41. return new RestResult()
    42.  
    
  42. .setCode(ResultCode.FAIL)
    43.  
    
  43. .setMessage(message)
    44.  
    
  44. .setData(data);
    45.  
    
  45. }
    46.  
    
  46. //自定义创建
    47.  
    
  47. public RestResult getFreeResult(ResultCode code, String message, Object data) {
    48.  
    
  48. return new RestResult()
    49.  
    
  49. .setCode(code)
    50.  
    
  50. .setMessage(message)
    51.  
    
  51. .setData(data);
    52.  
    
  52. }
    53.  
    
  53. }
    54.

具体代码可参考：https://github.com/dgyuanjun/SpringBoot-Vue.git

二、Vue前端的开发

1.新建登陆页面，在components里，新建Login.vue


   
     
     
   
     
    
  1. <template>
    2.  
    
  2. <div class="login">
    3.  
    
  3. {{ message }}
    4.  
    
  4. <input v-model="username" placeholder="用户名">
    5.  
    
  5. <input v-model="password" placeholder="密码">
    6.  
    
  6. <button v-on:click="login">登陆 </button>
    7.  
    
  7. </div>
    8.  
    
  8. </template>
    9.  
    

    10.  
    
  10. <script>
    11.  
    
  11. export default {
    12.  
    
  12. name: "login",
    13.  
    
  13. data() {
    14.  
    
  14. return {
    15.  
    
  15. message: 'Hello Vue!',
    16.  
    
  16. username: '',
    17.  
    
  17. password: ''
    18.  
    
  18. }
    19.  
    
  19. },
    20.  
    
  20. http: {
    21.  
    
  21. headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    22.  
    
  22. },
    23.  
    
  23. methods: {
    24.  
    
  24. login: function () {
    25.  
    
  25. var _this = this;
    26.  
    
  26. console.log(_this.username+_this.password);
    27.  
    
  27. _this.$http.post('http://localhost:8080/person/login', {
    28.  
    
  28. username: _this.username,
    29.  
    
  29. password: _this.password
    30.  
    
  30. },{emulateJSON:true}
    31.  
    
  31. )
    32.  
    
  32. .then(function (response) {
    33.  
    
  33. var errorcode = response.data.code;
    34.  
    
  34. console.log(response.data.data)
    35.  
    
  35. if (errorcode == "200") {
    36.  
    
  36. _this.$router.push(
    37.  
    
  37. { path: '/HelloWorld',
    38.  
    
  38. query: {
    39.  
    
  39. user: response.data.data,
    40.  
    
  40. }
    41.  
    
  41. });
    42.  
    
  42. } else {
    43.  
    
  43. _this.$router.push({ path: '/Test' });
    44.  
    
  44. }
    45.  
    
  45. })
    46.  
    
  46. .catch(function (error) {
    47.  
    
  47. console.log(error);
    48.  
    
  48. });
    49.  
    
  49. }
    50.  
    
  50. }
    51.  
    

    52.  
    
  52. }
    53.  
    
  53. </script>
    54.  
    

    55.  
    
  55. <style scoped>
    56.  
    

    57.  
    
  57. </style>
    58.

2.新建登陆失败的提示页面Fail.vue，成功的页面可采用原有的HelloWorld.vue


   
     
     
   
     
    
  1. <template>
    2.  
    
  2. <div class="hello">
    3.  
    
  3. <h2>{{ msg }}</h2>
    4.  
    
  4. </div>
    5.  
    
  5. </template>
    6.  
    

    7.  
    
  7. <script>
    8.  
    
  8. export default {
    9.  
    
  9. name: 'HelloWorld',
    10.  
    
  10. data () {
    11.  
    
  11. return {
    12.  
    
  12. msg: '登陆失败'
    13.  
    
  13. }
    14.  
    
  14. }
    15.  
    
  15. }
    16.  
    
  16. </script>
    17.  
    

    18.  
    
  18. <!-- Add "scoped" attribute to limit CSS to this component only -->
    19.  
    
  19. <style scoped>
    20.  
    
  20. h1, h2 {
    21.  
    
  21. font-weight: normal;
    22.  
    
  22. }
    23.  
    
  23. ul {
    24.  
    
  24. list-style-type: none;
    25.  
    
  25. padding: 0;
    26.  
    
  26. }
    27.  
    
  27. li {
    28.  
    
  28. display: inline-block;
    29.  
    
  29. margin: 0 10px;
    30.  
    
  30. }
    31.  
    
  31. a {
    32.  
    
  32. color: #42b983;
    33.  
    
  33. }
    34.  
    
  34. </style>
    35.

3.将组件添加到路由表中，在router下的index.js文件


   
     
     
   
     
    
  1. import Vue from 'vue'
    2.  
    
  2. import Router from 'vue-router'
    3.  
    
  3. import HelloWorld from '@/components/HelloWorld'//组件的位置
    4.  
    
  4. import Login from '@/components/Login'
    5.  
    
  5. import Fail from '@/components/Fail'
    6.  
    

    7.  
    
  7. Vue.use(Router)
    8.  
    
  8. export default new Router({
    9.  
    
  9. routes: [
    10.  
    
  10. {
    11.  
    
  11. path: '/',//系统的首页面url
    12.  
    
  12. name: 'Login',
    13.  
    
  13. component: Login//对应上文的import
    14.  
    
  14. },{
    15.  
    
  15. path: '/HelloWorld',
    16.  
    
  16. name: 'HelloWorld',
    17.  
    
  17. component: HelloWorld
    18.  
    
  18. },{
    19.  
    
  19. path: '/Fail',
    20.  
    
  20. name: 'Fail',
    21.  
    
  21. component: Fail
    22.  
    
  22. }
    23.  
    
  23. ]
    24.  
    
  24. })
    25.

4.main.js文件添加vue-resource，支持http请求,如果未安装依赖包，先npm安装依赖

$ npm install vue-resource

   
     
     
   
     
    
  1. // The Vue build version to load with the `import` command
    2.  
    
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3.  
    
  3. import Vue from 'vue'
    4.  
    
  4. import App from './App'
    5.  
    
  5. import router from './router'
    6.  
    
  6. import  VueResource  from 'vue-resource'
    7.  
    

    8.  
    
  8. Vue.use(VueResource);
    9.  
    
  9. Vue.config.productionTip = false
    10.  
    

    11.  
    
  11. /* eslint-disable no-new */
    12.  
    
  12. new Vue({
    13.  
    
  13. el: '#app',
    14.  
    
  14. router,
    15.  
    
  15. components: { App },
    16.  
    
  16. template: '<App/>'
    17.  
    
  17. })
    18.

三、测试效果

1.登陆页面

前后端分离之Vue

2.成功后显示后台数据信息

前后端分离之Vue

3.登陆失败


相关链接

前后端分离之Vue（一）Vue环境搭建 http://blog.csdn.net/shenbug/article/details/79541218

前后端分离之Vue(三) Vue爬过的那些坑 http://blog.csdn.net/shenbug/article/details/79547171

爬过得那些坑

前言：在整个Vue的过程中，遇到了不少坑。查找不同的资料，把这些坑给填了，记录下这些坑，以及解决办法。

一、Http请求的那些坑

1.不支持http请求

表现为：程序启动正常，点击按妞不跳转，后台无响应，浏览器调试出现

Uncaught TypeError: Cannot read property 'post' of undefined

解决办法：添加vue-resource支持，在main.js添加


   
     
     
   
     
    
  1. import  VueResource  from 'vue-resource'
    2.  
    
  2. Vue.use(VueResource);
    3.

2.post请求，后台接收参数为null

表现为：后台响应但是参数为null，正确的登陆失效，调试时，参数为from object

解决办法：http请求中，添加

{emulateJSON:true}

全部的Http请求部分代码为


   
     
     
   
     
    
  1. _this.$http.post('http://localhost:8080/person/login', {
    2.  
    
  2. username: _this.username,
    3.  
    
  3. password: _this.password
    4.  
    
  4. }
    5.  
    
  5. ,{emulateJSON:true}
    6.  
    
  6. )
    7.  
    
  7. .then(function (response) {
    8.  
    
  8. var errorcode = response.data.code;
    9.  
    
  9. if (errorcode == "200") {
    10.  
    
  10. _this.$router.push(
    11.  
    
  11. { path: '/HelloWorld',
    12.  
    
  12. query: {
    13.  
    
  13. user: response.data.data,
    14.  
    
  14. }
    15.  
    
  15. });
    16.  
    
  16. } else {
    17.  
    
  17. _this.$router.push({ path: '/Fail' });
    18.  
    
  18. }
    19.  
    
  19. })
    20.  
    
  20. .catch(function (error) {
    21.  
    
  21. console.log(error);
    22.  
    
  22. });
    23.

3、正确处理后，跳转到空页面

原因：路由的url配置有问题，注意组件的引用的对应关系以及path的路径问题

4.Request请求变成Options

解决办法：设置头格式


   
     
     
   
     
    
  1. http: {
    2.  
    
  2. headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    3.  
    
  3. },
    4.


二、Vue视图之间的跳转实现

1.引用router组件

2.在router.js添加对应的view，以及相对应的path的配置

3.this.$router.push({path:'url'})

4.可参照上文的Http请求部分代码

三、Vue跳转传递参数

采用编程式的实现方式

传递参数


   
     
     
   
     
    
  1. _this.$router.push(
    2.  
    
  2. { path: '/HelloWorld',//跳转的路径
    3.  
    
  3. query: {//query 代表传递参数
    4.  
    
  4. user: response.data.data,//参数名key,以及对应的value
    5.  
    
  5. }
    6.  
    
  6. });
    7.

接收参数

this.$route.query.user

user代表的参数名，不但可以传递单个参数，也可以传递对应，解析的方式user.属性

四、实例，登陆页面的Vue代码


   
     
     
   
     
    
  1. <template>
    2.  
    
  2. <div class="login">
    3.  
    
  3. {{ message }}<br/>
    4.  
    
  4. <input v-model="username" placeholder="用户名"><br/>
    5.  
    
  5. <input v-model="password" placeholder="密码"><br/>
    6.  
    
  6. <button v-on:click="login">登陆 </button>
    7.  
    
  7. </div>
    8.  
    
  8. </template>
    9.  
    
  9. <script>
    10.  
    
  10. export default {
    11.  
    
  11. name: "login",
    12.  
    
  12. data() {
    13.  
    
  13. return {
    14.  
    
  14. message: 'Vue 登陆页面',
    15.  
    
  15. username: '',
    16.  
    
  16. password: ''
    17.  
    
  17. }
    18.  
    
  18. },
    19.  
    
  19. http: {
    20.  
    
  20. headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    21.  
    
  21. },
    22.  
    
  22. methods: {
    23.  
    
  23. login: function () {
    24.  
    
  24. var _this = this;
    25.  
    
  25. console.log(_this.username+_this.password);
    26.  
    
  26. _this.$http.post('http://localhost:8080/person/login', {
    27.  
    
  27. username: _this.username,
    28.  
    
  28. password: _this.password
    29.  
    
  29. }
    30.  
    
  30. ,{emulateJSON:true}
    31.  
    
  31. )
    32.  
    
  32. .then(function (response) {
    33.  
    
  33. var errorcode = response.data.code;
    34.  
    
  34. if (errorcode == "200") {
    35.  
    
  35. _this.$router.push(
    36.  
    
  36. { path: '/HelloWorld',
    37.  
    
  37. query: {
    38.  
    
  38. user: response.data.data,
    39.  
    
  39. }
    40.  
    
  40. });
    41.  
    
  41. } else {
    42.  
    
  42. _this.$router.push({ path: '/Fail' });
    43.  
    
  43. }
    44.  
    
  44. })
    45.  
    
  45. .catch(function (error) {
    46.  
    
  46. console.log(error);
    47.  
    
  47. });
    48.  
    
  48. }
    49.  
    
  49. }
    50.  
    
  50. }
    51.  
    
  51. </script>
    52.  
    
  52. <style scoped>
    53.  
    
  53. </style>
    54.

五、实例demo源码下载


相关链接

前后端分离之Vue（一）Vue环境搭建 http://blog.csdn.net/shenbug/article/details/79541218

前后端分离之Vue（二）前后端整合http://blog.csdn.net/shenbug/article/details/79542717





以上是关于前后端分离之Vue的主要内容，如果未能解决你的问题，请参考以下文章

前后端分离之Vue

前后端分离之 vue+JWT+Spring Boot

SpringBoot + Vue（前后端分离之博客上传）

前后端分离之mockjs实战demo

Vue+Django REST framework前后端分离平台开发之项目初始化

前后端分离之评论功能前端——django+mysql+vue+element+axios