Vue高级篇--实现前后端分离

2022-11-30 14:21 276人阅读评论(0)

一、安装Nodejs服务器

等价于我们java端的Tomcat服务器，运行前端项目 https://nodejs.org/en/download/

安装步骤省略----[注意:不要安装到中文目录下]

验证是否安装成功: 如图所示就是成功了

二、安装Npm

        我们之前在vue网页中要想使用elementui 或者 axios 我们需要在网页中引入上面的插件

        安装需要的依赖以及插件------等价于之前的maven.

        注意: 如果你安装了nodejs 默认也会安装npm.

验证是否安装成功：如图所示就是安装成功了

三、安装vue脚手架

它的作用: 用来创建vue工程

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本

可以使用下列任一命令安装这个新的包：


   
    
     
      
     
     
      
       npm install -g @vue/cli
      
     
    
     
      
     
     
      
       # OR
      
     
    
     
      
     
     
      
       yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确：如图所示就是安装成功了

四、使用vue脚手架搭建vue工程

使用vue ui 命名

自动弹出如下界面

五、vue工程安装需要的插件和依赖

布局:----ElementUI

异步请求:----axios

第一种直接在图形化安装:

安装axios依赖

六、安装前端的开发工具

Vscode 专业的前端开发工具。

webstorm 它是和idea工具同一家公司开发的软件，而且界面和idea一模一样

关联npm

重启webstorm就能生效了

七、使用webstorm打开vue工程

        node-module: 它是vue工程所依赖的模块。【空间最大的就是该目录】等价于lib文件夹

        package.json: 定义工程需要的插件和依赖。等价于pom.xml

        在真实开发中，不会把node_modules文件夹发给客户。需要客户拿到项目自己下载node_modules文件夹。

        在工程目录下使用npm install安装

7.1 运行vue工程

八、src目录结构的介绍

修改App.vue的内容


  
   
    
     
    
    
     
      <template>
     
    
   
    
     
    
    
       
      <div id="app">
     
    
   
    
     
    
    
         
      <!--该标签 等价于之前的a标签 to属性等价于a标签中href属性-->
     
    
   
    
     
    
    
         
      <router-link to="/home">首页
      </router-link> *
     
    
   
    
     
    
    
         
      <router-link to="/student">学生
      </router-link>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
         
      <!--路由视图渲染标签-->
     
    
   
    
     
    
    
         
      <router-view/>
     
    
   
    
     
    
    
       
      </div>
     
    
   
    
     
    
    
     
      </template>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <script>
     
    
   
    
     
    
    
     
      import 
      HelloWorld 
      from 
      './components/HelloWorld.vue'
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      export 
      default {
     
    
   
    
     
    
    
       
      name: 
      'app',
     
    
   
    
     
    
    
       
      components: {
     
    
   
    
     
    
    
         
      HelloWorld
     
    
   
    
     
    
    
     
        }
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </script>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      <style>
     
    
   
    
     
    
    
     
      #app {
     
    
   
    
     
    
    
       
      font-family: 
      'Avenir', Helvetica, Arial, sans-serif;
     
    
   
    
     
    
    
     
        -webkit-
      font-smoothing: antialiased;
     
    
   
    
     
    
    
     
        -moz-osx-
      font-smoothing: grayscale;
     
    
   
    
     
    
    
       
      text-align: center;
     
    
   
    
     
    
    
       
      color: 
      #2c3e50;
     
    
   
    
     
    
    
       
      margin-top: 
      60px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>

路由跳转的流程

九、浅谈main.js的配置文件

如果之后还要用什么插件需要在main.js中引入

十、浅谈App.vue组件

每个组件必须加 div

10.1. 如何一个组件引用另一个组件？

①当前组件中引入另一个组件


   
    
     
      
     
     
       
       /*①导入组件------其他页面
      
     
    
     
      
     
     
      
        import 别名 from '组件路径'
      
     
    
     
      
     
     
      
        */
      
     
    
     
      
     
     
      
       import Hello from 
       './components/Hello.vue'
      
     
    
     
      
     
     
      
       import HelloWorld from 
       './components/HelloWorld.vue'

②注册另一个组件


   
    
     
      
     
     
      
       export 
       default {
      
     
    
     
      
     
     
      
         name: 
       'app',
      
     
    
     
      
     
     
        
       //②注册组件
      
     
    
     
      
     
     
      
         components: {
      
     
    
     
      
     
     
      
           Hello,
      
     
    
     
      
     
     
          
       //起别名
      
     
    
     
      
     
     
          
       //'Hello' : 'aaa',
      
     
    
     
      
     
     
      
           HelloWorld
      
     
    
     
      
     
     
      
         }
      
     
    
     
      
     
     
      
       }

③使用注册的组件


   
    
     
      
     
     
       
       <!--③使用组件-->
      
     
    
     
      
     
     
          
       <Hello>
       </Hello>
      
     
    
     
      
     
     
          
       <!--<aaa></aaa>-->
      
     
    
     
      
     
     
          
       <HelloWorld msg="Welcome to Your Vue.js App"/>

10.2.父组件如何给子组件传值？

图中msg2应该是Number类型

①父组件App.vue定义要传的属性

②使用子组件的时候传值


   
    
     
      
     
     
       
       <!--③使用组件 在子组件 props中定义了msg名称 跟子组件保持一致就行-->
      
     
    
     
      
     
     
          
       <Hello :msg="names" :msg2="age">
       </Hello>

③子组件定义props，并使用

④子组件使用属性

{{msg[0]}}  {{msg2}}

十一、前后端异步调用时

跨域问题: 从一个域向另一个域发生请求。可能会产生跨域问题。

跨域产生的前提:

（1）必须使用了ajax请求

（2）不同域。【协议不同 | ip不同 | port不同】

如何解决:

[1] 前端解决【我不会】

[2] 后端解决 --它也有两种方式。

第一种: 直接使用注解

第二种: 写一个跨域配置类


   
    
     
      
     
     
      
       /**
      
     
    
     
      
     
     
      
        * Created by Intellij IDEA
      
     
    
     
      
     
     
      
        *
      
     
    
     
      
     
     
      
        * @author 王俊凯
      
     
    
     
      
     
     
      
        * @Date: 2022/11/22 18:24
      
     
    
     
      
     
     
      
        * @Version 1.0
      
     
    
     
      
     
     
      
        */
      
     
    
     
      
     
     
      
       package com.wjk.config;
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       import org.springframework.context.annotation.Bean;
      
     
    
     
      
     
     
      
       import org.springframework.context.annotation.Configuration;
      
     
    
     
      
     
     
      
       import org.springframework.web.cors.CorsConfiguration;
      
     
    
     
      
     
     
      
       import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
      
     
    
     
      
     
     
      
       import org.springframework.web.filter.CorsFilter;
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
      
       @Configuration
      
     
    
     
      
     
     
      
       public 
       class 
       CorsConfig {
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
          
       // 当前跨域请求最大有效时长。这里默认1天
      
     
    
     
      
     
     
          
       private 
       static 
       final 
       long 
       MAX_AGE 
       = 
       24 * 
       60 * 
       60;
      
     
    
     
      
     
     
       
      
     
    
     
      
     
     
          
       @Bean
      
     
    
     
      
     
     
          
       public CorsFilter 
       corsFilter
       () {
      
     
    
     
      
     
     
              
       UrlBasedCorsConfigurationSource 
       source 
       = 
       new 
       UrlBasedCorsConfigurationSource();
      
     
    
     
      
     
     
              
       CorsConfiguration 
       corsConfiguration 
       = 
       new 
       CorsConfiguration();
      
     
    
     
      
     
     
      
               corsConfiguration.addAllowedOrigin(
       "*"); 
       // 1 设置访问源地址
      
     
    
     
      
     
     
      
               corsConfiguration.addAllowedHeader(
       "*"); 
       // 2 设置访问源请求头
      
     
    
     
      
     
     
      
               corsConfiguration.addAllowedMethod(
       "*"); 
       // 3 设置访问源请求方法
      
     
    
     
      
     
     
      
               corsConfiguration.setMaxAge(MAX_AGE);
      
     
    
     
      
     
     
      
               source.registerCorsConfiguration(
       "/**", corsConfiguration); 
       // 4 对接口配置跨域设置
      
     
    
     
      
     
     
              
       return 
       new 
       CorsFilter(source);
      
     
    
     
      
     
     
      
           }
      
     
    
     
      
     
     
      
       }

十二、浅谈路由

12.1 使用路由跳转


  
   
    
     
    
    
        
      <p>
     
    
   
    
     
    
    
          
      <!--router-link可以理解为<a> to可以理解为href=路径
     
    
   
    
     
    
    
     
       一旦使用了路由跳转 ----必须找router/index.js文件
     
    
   
    
     
    
    
     
       该文件中配置了路由和组件的映射关系
     
    
   
    
     
    
    
     
       -->
     
    
   
    
     
    
    
          
      <router-link to="/home">
      <el-button type="primary">首页
      </el-button>
      </router-link>
     
    
   
    
     
    
    
          
      <router-link to="/user">
      <el-button type="primary">用户管理
      </el-button>
      </router-link>
     
    
   
    
     
    
    
        
      </p>

12.2 配置router/index.js文件


  
   
    
     
    
    
         
      //不管用不用都先把组件引用过来
     
    
   
    
     
    
    
     
        {
     
    
   
    
     
    
    
     
          path: 
      '/home',
     
    
   
    
     
    
    
     
          name: 
      'Home',
     
    
   
    
     
    
    
     
          component: Home
     
    
   
    
     
    
    
     
        },
     
    
   
    
     
    
    
         
      //使用的时候再把组件引用过来
     
    
   
    
     
    
    
     
        {
     
    
   
    
     
    
    
     
          path: 
      '/user',
     
    
   
    
     
    
    
     
          name: 
      'User',
     
    
   
    
     
    
    
     
          component: () => 
      import(
      '../views/User.vue')
     
    
   
    
     
    
    
     
        }

这里有两种配置路由的方式，一种是不管用不用直接把组件先引过来，另一种是使用的时候再把组件引过来

12.3 渲染组件


  
   
    
     
    
    
         
      <!--渲染组件-->
     
    
   
    
     
    
    
           
      <router-view/>

转载：https://blog.csdn.net/wk3510/article/details/127970293

查看评论

小言_互联网的博客