【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端

文章目录

      • 一、Nodejs/Vue安装及环境配置
        • 1、Node.js的下载和配置
        • 2、环境配置
      • 二、安装VUE
        • 1、按指令安装:
        • 2、创建VUE-CLI项目
        • 3、使用VSCODE 打开对应的工程
      • 三、安装ROUTE
          • 1、安装route
          • 2、配置route
          • 5、如何使用route的指令进行转跳
          • vroute的三种转跳方式
        • 补充知识点:关于route转跳的地址
          • 6、使用route实现类似iframe布局的效果
      • 四、使用VUE进行前后端交互(AXIOS)
        • 一、什么是axios?
        • 和ajax对比优缺点
        • 补充知识点2:同源策略
          • 1、什么是同源策略? —— 保证浏览器的安全性
          • 2、如何解决这个问题?————跨域请求
        • 二、基本操作
      • 五、使用vue脚手架搭建代理,实现前后端分离

一、Nodejs/Vue安装及环境配置

参考连接http://t.csdn.cn/cbchI

1、Node.js的下载和配置

  1. 下载地址:https://nodejs.org/en/download/,选择对应的版本下载
  2. 安装位置可选,这里是默认的C盘安装,路径是C:\Program Files\nodejs

2、环境配置

  1. 分别在node里安装目录下创建node_cache和node_global两个文件夹。

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第1张图片
  2. 打开CMD,输入如下,安装路径注意替换

    npm config set prefix "C:\Program Files\nodejs\node_global"
    npm config set cache "C:\Program Files\nodejs\node_cache"
    
  3. 配置环境变量——打开系统高级设置-环境变量,添加如下变量

    • 新建 系统变量 ,变量名 NODE_PATH ,变量值 安装路径+\node_modules

      【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第2张图片
    • 修改 用户变量的path,进行如下替换

      【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第3张图片

      教程的图如下

      【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第4张图片

二、安装VUE

速度慢,可以配置淘宝的镜像(老师说会有bug)

  • 配置淘宝镜像源

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

  • 直接修改npm的默认配置

npm config set registry https:*//registry.npm.taobao.org*

另外如果需要重装可以用到以下指令:

npm uninstall @vue/cli -g   #卸载

1、按指令安装:

  1. vue-cli

    cnpm install --global vue-cli	 // vue-cli全局安装
    vue -V			       //查看版本,注意V 是大写
    
  2. npm

    cnpm install npm -g
    npm -v		       //查看版本,注意v 是小写,处理查vue是大写
    
  3. cnpm

    npm install cnpm -g		// 升级安装cnpm
    或
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
  4. vue/cli安装查看

    npm install -g @vue/cli
    
  5. 可选 express模块

    npm install express -g 		// -g是全局安装的意思
    

最终modules文件夹的内可以查到已经装好的插件

【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第5张图片

2、创建VUE-CLI项目

  • 创建准备

这一步需要管理员权限的CMD,启动管理员的CMD后使用cd /d 切换到项目目录下,输入vue -V确认无误后再执行创建指令

image-20221021114843792

  1. 输入指令vue create +项目名,即可新建项目。

    • 注意:项目名一定不能有大写的
  2. 选择VUE2项目,开始进行创建

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第6张图片

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第7张图片

  3. 根据以下的提示输入指令npm run serve,即可启动npm自带的web服务器,并支持访问

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第8张图片
  4. 输入下方提示的地址即可访问vue网页

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第9张图片


3、使用VSCODE 打开对应的工程

前往微软官网下载vscode最新版

  1. 点击打开文件夹,选择刚才创建的项目。并点击信任文件夹

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第10张图片

【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第11张图片
  1. 在选项卡找到终端 —— 新建终端

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第12张图片
  2. 在下方指令栏内输入npm run serve即可启动web服务器

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第13张图片

    这里可能会有vscode权限问题报错,目前没遇到

    【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第14张图片

三、安装ROUTE

1、安装route

vue没有自带路由,需要使用npm手动添加依赖

  1. 输入指令npm install -s [email protected]可以下载对应的版本
  2. 输入指令npm list vue-route可以查看已存在的版本
2、配置route
  1. 创建路由表 src/route/index.js 文件

  2. 输入一下配置

    import Vue from "vue"
    import VueRouter from "vue-router"
    
    // 导入页面组件
    import LoginView from "../views/LoginView.vue"
    import MainView from "../views/MainView.vue"
    
    // Vue模块全局加载,使用VueRouter模块
    Vue.use(VueRouter)
    
    // 创建路由表(最常用的修改)
    var routes = [
        {path:"/login",name:"login",component:LoginView},
        {path:"/main",name:"main",component:MainView}
    ]
    
    
    // 创建路由对象:加载路由表(相当于是固定默认代码)
    const router = new VueRouter({
        mode:"hash",    // 路径的模式,hash模式
        routes  //当属性名和变量名一致可以简写变量名
    })
    
    // 导入
    export default router;
    
    • 其中导入页面组件和路由表是最常用的修改,其他的都可以当初固定格式
    • 常见错误:注意单词routerroutes的区别和拼写
  3. main.js中导入路由器

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'  // 导入路由器

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router: router  // 添加路由器
}).$mount('#app')
  1. 最后将前面写的App.vue进行修改和简化



5、如何使用route的指令进行转跳

原来是js中,使用location.href = '地址'进行转跳

  • 在route中,使用router.push进行转跳
vroute的三种转跳方式

路由切换: 声明式

​ 编程式 router.push()

​ 替换 router.replace(...)

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })


补充知识点:关于route转跳的地址

使用井号#加上后面的路由地址,这种模式就是hash模式

  • 还有一种模式叫history模式,地址栏用?进行分割

【备忘录】从头搭建VUE项目,配置ROUTE路由,并使用AXIOS跨域访问后端_第15张图片

6、使用route实现类似iframe布局的效果

思路整理

  1. 修改index.js的路由表routes的元素对象,可以添加一个children属性,用于存储内部的路由表,实现路径之间的嵌套

    // 创建路由表(最常用的修改)
    var routes = [
        {path:"/",redirect:"login"}, // 默认路径 重定向
        {path:"/login",name:"login",component:LoginView},
        {path:"/main",name:"main",component:MainView,
            children:[
                {path:"/user",name:"user",component:UserViwer},
            ]
        }
    ]
    
  2. 修改对应的.vue文件,添加标签就可以访问对应的组件

  3. 使用标签,就可以实现不同路径的组件的转跳

四、使用VUE进行前后端交互(AXIOS)

需要使用到axios,输入指令下载axiosnpm install -s axios

一、什么是axios?

  1. 提供了promise的方式
  2. 用户可以自己安装

和ajax对比优缺点

1.axios优点:
(1)从浏览器中创建 XMLHttpRequest;
(2)支持 Promise API;
(3)从 node.js 创建 http 请求;
(4)转换请求和响应数据;
(5)自动转换JSON数据。

1.ajax缺点:
(1)基于原生的XHR开发,XHR本身的架构不清晰;
(2)JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理;
(3)不符合关注分离(Separation of Concerns)的原则;
(4)配置和调用方式非常混乱,而且基于事件的异步模型不友好。

补充知识点2:同源策略

之前在使用ajax时,前端和后端的端口必须一直,才能发送ajax,这就是同源策略

1、什么是同源策略? —— 保证浏览器的安全性
  1. 协议必须一致,http或https
  2. 同一个服务器的地址必须一直,localhost
  3. 端口也必须一致
2、如何解决这个问题?————跨域请求
  1. 前端的解决方案 :jsonp。缺点是只能解决get请求

  2. 后端的解决方案:放开限制,让每个人都能访问,安全性就降低了

    在controller类或方法上,加入注解@CrossOrigin

    在前端就需要填写后端端口的绝对地址,比如http://localhost:8880/user/login

  3. 第三方解决方案:加入代理

    • 在开发阶段,vue脚手架自带有代理
    • 产品阶段:Nginx

二、基本操作

import axios from "axios"   // 导入
export default{
    name:'LoginView',   //组件名称
    methods:{
        handleHerf(){
            // url data dataType suucess
            axios.get(  // 相当于type
                "url",  // 要访问的url
                {params:{
                    // 存data
                }}
            )
                .then(function(data){
                // 成功时返回的事件
            })
                .catch(function(data){
                // 失败的时间
            });
            this.$router.push("/main"); // 登陆的转跳
        }
    },
    mounted(){
        // 页面加载后的指令
    }
}

五、使用vue脚手架搭建代理,实现前后端分离

进入vue.config.js。进行如下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:8000,  // 配置前端服务器端口
    proxy:{
      // 配置代理地址   api可以自定义
      '/api':{
        // 配置后端的地址
        target:"http://localhost:8888", 
        // 自动将/api替换成空
        pathRewrite:{'^/api':''}
      }
    }
  }
})

实现的效果

  • 请求地址中含有/api的,都会代理到目标的地址。

  • 默认实现的方式是:会在/api前加入target的地址。效果类似http://localhost:8880/user/login

    • 显然这并不符合我们的需求,所以还需要添加一行配置 pathRewrite:{'^/api':''}。相当于将/api替换成空
  • 在axios的请求中,地址就需要进行修改,只需要写成api/user/login

    这样,前后端的地址不同(项目不同)也能实现数据交互了

你可能感兴趣的:(学习笔记,备忘录,vue.js,java,ajax)