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

朱雀 2023-10-03 21:39 72阅读 0赞

## 一、安装Nodejs服务器 ##

> **等价于我们java端的Tomcat服务器， 运行前端项目** [https://nodejs.org/en/download/][https_nodejs.org_en_download] 
> 
>   **安装步骤省略----\[注意:不要安装到中文目录下\]**

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

![745c89c375e94729964c16e2be6c490b.png][]

## 二、安装Npm ##

>  **我们之前在vue网页中要想使用elementui 或者 axios 我们需要在网页中引入上面的插件**
> 
>  **安装需要的依赖以及插件------等价于之前的maven.**
> 
>  **注意: 如果你安装了nodejs 默认也会安装npm.**

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

![b828200bd3964a86bc483f435237fa42.png][]

## 三、安装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

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

![aa9f368942af475da0c2323063dda1bb.png][]

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

**使用vue ui 命名**

![fc2537e3af9343baa735e5f2b4470f69.png][]

**自动弹出如下界面**

![0f1c61c84c0a4897abca97c515b300f7.png][]

![940487ef7714413c88bcdb4efc2ebe7f.png][]

![deafe34f75cb4a8a9c257fb74b343812.png][]

![334caaffd5de4f0cabf617c1e0730c00.png][]

![f896af206fed45b485c03d387b2e8ff1.png][]

![c8f8ad47802c4497a075708f2faced39.png][]

![052e1e3e03ad4921acf50f348f1abc4d.png][]

![3bdb479417364b66b457553f03052845.png][]

![e5afaf8bcb89408bb6e79c84181ff59f.png][]

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

>  **布局:----ElementUI**
> 
>  **异步请求:----axios**

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

![abd73ef205de47379408c7c61baf30ac.png][]

![aac78c19f11549268e3b7a6699f57a6b.png][]

![39df03c4058e453c8ef0166f407a01e7.png][]

![e601a111fe7544938ca18258be328f0c.png][]

>  **安装axios依赖**

![776ab3305653468eb5b6525ca79724ce.png][]

![6fe808f994094ad397c1f02f17497f9d.png][]

## 六、安装前端的开发工具 ##

>  **Vscode 专业的前端开发工具。**
> 
>  **webstorm 它是和idea工具同一家公司开发的软件，而且界面和idea一模一样**

**关联npm**

>  **重启webstorm就能生效了**

## 七、使用webstorm打开vue工程 ##

![94203cfc4a284a64a2db16f19e1867ce.png][]

>  **node-module: 它是vue工程所依赖的模块。【空间最大的就是该目录】等价于lib文件夹**
> 
>  **package.json: 定义工程需要的插件和依赖。等价于pom.xml**
> 
>  **在真实开发中，不会把node\_modules文件夹发给客户。 需要客户拿到项目自己下载node\_modules文件夹。**
> 
>  **在工程目录下使用npm install安装**

####  **7.1 运行vue工程**  ####

![a7cc84afba38413b8fcec0bb6c4711d7.png][]

![a39475a1b62e4d1dbc77059f8ea758ff.png][]

## 八、src目录结构的介绍 ##

![e344f632ed354e95b70d90250f033a57.png][]

>  **修改App.vue的内容**

<template>
      <div id="app">
        
        <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>

>  **路由跳转的流程**

![531d3c9c4c1449feb9b877e76ee98d3d.png][]

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

![d8b5088c23bd4deb9fdd19b76da6da8d.png][]

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

## 十、浅谈App.vue组件 ##

>  **每个组件必须加 div**

![aaecf5fd03ef4a3794ac539ff73511e9.png][]

#### **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>
>         
>         <HelloWorld msg="Welcome to Your Vue.js App"/>

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

![1cdf6ee847134d03aa1e4843f5a61a11.png][]

> 图中**msg2应该是Number类型**
> 
>  **①父组件App.vue定义要传的属性**
> 
>     data() {
>         return {
>           age: 15,
>           names: ["张三","李四"]
>         }
>       }
> 
>  **②使用子组件的时候传值**
> 
>     
>         <Hello :msg="names" :msg2="age"></Hello>
> 
>  **③子组件定义props，并使用**
> 
>     props: {
>                 msg: [],
>                 msg2: String
>             }
> 
>  **④子组件使用属性**
> 
>     {
>         {msg[0]}}  {
>         {msg2}}

## 十一、前后端异步调用时 ##

![cc14baafd7be4a3686250fefd43d7968.png][]

>  **跨域问题: 从一个域向另一个域发生请求。可能会产生跨域问题。**
> 
>  **跨域产生的前提:**
> 
>  **（1）必须使用了ajax请求**
> 
>  **（2） 不同域。【协议不同 | ip不同 | port不同】**
> 
>  **如何解决:**
> 
>  **\[1\] 前端解决 【我不会】**
> 
>  **\[2\] 后端解决 --它也有两种方式。**
> 
> **第一种: 直接使用注解**
> 
> ![5f4fd3f7fb6e49b3926c55665bb86bd5.png][]
> 
>  **第二种: 写一个跨域配置类** 
> 
>     /**
>      * 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);
>         }
>     }

## 十二、浅谈路由 ##

#### ![cc1f6d047f8e46b484cff0224109c317.png][] ####

#### 12.1 使用路由跳转 ####

<p>
         
         <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/>

![bcee7e470f964b0ab07cfc253e312716.png][]

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[745c89c375e94729964c16e2be6c490b.png]: https://img-blog.csdnimg.cn/745c89c375e94729964c16e2be6c490b.png
[b828200bd3964a86bc483f435237fa42.png]: https://img-blog.csdnimg.cn/b828200bd3964a86bc483f435237fa42.png
[Node.js]: https://nodejs.org/
[n]: https://github.com/tj/n
[nvm]: https://github.com/creationix/nvm
[nvm-windows]: https://github.com/coreybutler/nvm-windows
[aa9f368942af475da0c2323063dda1bb.png]: https://img-blog.csdnimg.cn/aa9f368942af475da0c2323063dda1bb.png
[fc2537e3af9343baa735e5f2b4470f69.png]: https://img-blog.csdnimg.cn/fc2537e3af9343baa735e5f2b4470f69.png
[0f1c61c84c0a4897abca97c515b300f7.png]: https://img-blog.csdnimg.cn/0f1c61c84c0a4897abca97c515b300f7.png
[940487ef7714413c88bcdb4efc2ebe7f.png]: https://img-blog.csdnimg.cn/940487ef7714413c88bcdb4efc2ebe7f.png
[deafe34f75cb4a8a9c257fb74b343812.png]: https://img-blog.csdnimg.cn/deafe34f75cb4a8a9c257fb74b343812.png
[334caaffd5de4f0cabf617c1e0730c00.png]: https://img-blog.csdnimg.cn/334caaffd5de4f0cabf617c1e0730c00.png
[f896af206fed45b485c03d387b2e8ff1.png]: https://img-blog.csdnimg.cn/f896af206fed45b485c03d387b2e8ff1.png
[c8f8ad47802c4497a075708f2faced39.png]: https://img-blog.csdnimg.cn/c8f8ad47802c4497a075708f2faced39.png
[052e1e3e03ad4921acf50f348f1abc4d.png]: https://img-blog.csdnimg.cn/052e1e3e03ad4921acf50f348f1abc4d.png
[3bdb479417364b66b457553f03052845.png]: https://img-blog.csdnimg.cn/3bdb479417364b66b457553f03052845.png
[e5afaf8bcb89408bb6e79c84181ff59f.png]: https://img-blog.csdnimg.cn/e5afaf8bcb89408bb6e79c84181ff59f.png
[abd73ef205de47379408c7c61baf30ac.png]: https://img-blog.csdnimg.cn/abd73ef205de47379408c7c61baf30ac.png
[aac78c19f11549268e3b7a6699f57a6b.png]: https://img-blog.csdnimg.cn/aac78c19f11549268e3b7a6699f57a6b.png
[39df03c4058e453c8ef0166f407a01e7.png]: https://img-blog.csdnimg.cn/39df03c4058e453c8ef0166f407a01e7.png
[e601a111fe7544938ca18258be328f0c.png]: https://img-blog.csdnimg.cn/e601a111fe7544938ca18258be328f0c.png
[776ab3305653468eb5b6525ca79724ce.png]: https://img-blog.csdnimg.cn/776ab3305653468eb5b6525ca79724ce.png
[6fe808f994094ad397c1f02f17497f9d.png]: https://img-blog.csdnimg.cn/6fe808f994094ad397c1f02f17497f9d.png
[94203cfc4a284a64a2db16f19e1867ce.png]: https://img-blog.csdnimg.cn/94203cfc4a284a64a2db16f19e1867ce.png
[a7cc84afba38413b8fcec0bb6c4711d7.png]: https://img-blog.csdnimg.cn/a7cc84afba38413b8fcec0bb6c4711d7.png
[a39475a1b62e4d1dbc77059f8ea758ff.png]: https://img-blog.csdnimg.cn/a39475a1b62e4d1dbc77059f8ea758ff.png
[e344f632ed354e95b70d90250f033a57.png]: https://img-blog.csdnimg.cn/e344f632ed354e95b70d90250f033a57.png
[531d3c9c4c1449feb9b877e76ee98d3d.png]: https://img-blog.csdnimg.cn/531d3c9c4c1449feb9b877e76ee98d3d.png
[d8b5088c23bd4deb9fdd19b76da6da8d.png]: https://img-blog.csdnimg.cn/d8b5088c23bd4deb9fdd19b76da6da8d.png
[aaecf5fd03ef4a3794ac539ff73511e9.png]: https://img-blog.csdnimg.cn/aaecf5fd03ef4a3794ac539ff73511e9.png
[1cdf6ee847134d03aa1e4843f5a61a11.png]: https://img-blog.csdnimg.cn/1cdf6ee847134d03aa1e4843f5a61a11.png
[cc14baafd7be4a3686250fefd43d7968.png]: https://img-blog.csdnimg.cn/cc14baafd7be4a3686250fefd43d7968.png
[5f4fd3f7fb6e49b3926c55665bb86bd5.png]: https://img-blog.csdnimg.cn/5f4fd3f7fb6e49b3926c55665bb86bd5.png
[cc1f6d047f8e46b484cff0224109c317.png]: https://img-blog.csdnimg.cn/cc1f6d047f8e46b484cff0224109c317.png
[bcee7e470f964b0ab07cfc253e312716.png]: https://img-blog.csdnimg.cn/bcee7e470f964b0ab07cfc253e312716.png