Vue基本整合（一）

hurricane_li

已于 2023-04-09 15:07:28 修改

阅读量504

点赞数

分类专栏：前端 JavaWeb Java 文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-03-16 11:57:38 首次发布

本文链接：https://blog.csdn.net/hurricane_li/article/details/129583256

版权

JavaWeb 同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

Java

10 篇文章 0 订阅

订阅专栏

NPM安装

npm是node的包管理工具

https://nodejs.org/en/

脚手架安装

npm i -g @vue/cli

https://registry.npmjs.org/

vue浏览器插件

https://devtools.vuejs.org/guide/installation.html#chrome

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

VUEX

全局变量管理

vuex4对应vue3，vuex3对应vue2

https://vuex.vuejs.org/

axios

ajax请求发起

npm install axios

import axios from 'axios'

axios.defaults.baseURL='http://localhost:8088'

https://axios-http.com/docs/intro

可以设置请求头

vue-router

路由管理

router4对应vue3，router3对应vue2

npm install vue-router

https://router.vuejs.org/guide/

mockjs

模拟后端数据

npm install mockjs

Mock.mock(RegExp('/user/say.*'),{'a':'a'}) //为了匹配带参数的请求要使用正则

Mock.mock('/user2/say',{'a':'b'})

http://mockjs.com/examples.html

vue-element-admin

一个vue的前段实现，可借鉴

https://github.com/PanJiaChen/vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/

js-cookie

cookie设置

import Cookies from 'js-cookie'

跨域问题（一般跨域无法使用cookie）

https://www.cnblogs.com/xmyd/p/11555214.html

springboot3不能使用jdk8

热部署

springboot web项目热部署，引入插件包，然后设置程序自动编译（idea有高级设置和compiler两个地方要设置）

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-devtools</artifactId>

</dependency>

JWT鉴权包

<groupId>io.jsonwebtoken</groupId>

</dependency>

简单实现

package com.example.demo.uitls;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

import java.util.Date;

public class Auth {
    private static long expire = 604800;
    private static String secret = "fdsalfjadskfjldsa";

    public static String generateToken(String username){
        Date now = new Date();
        Date expiration = new Date(now.getTime()+1000*expire);
        return Jwts.builder()
                .setHeaderParam("type","JWT")
                .setSubject(username)
                .setIssuedAt(now)
                .setExpiration(expiration)
                .signWith(SignatureAlgorithm.HS512,secret)
                .compact();
    }

    public static Claims getClaimsByToken(String token){
        return Jwts.parser()
                .setSigningKey(secret)
                .parseClaimsJws(token)
                .getBody();
    }
}

js导入导出

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    
</head>
<body>
    node与浏览器、es6语法、commonjs、require、webpack、vite

    通过修改package.json的type属性，可以更改node默认的支持风格：commonjs、module
    
    node默认支持commonjs的风格：require与module.exports，且支持导入文件夹(默认找文件夹下的index.js)；浏览器默认不支持commonjs风格
    module风格下，不支持导入文件夹，且导入路径不能省略扩展名.js；浏览器支持module风格
    
    webpack --mode [production|development]，webpack作为一个工具可以安装到全局 npm i webpack webpack-cli -g，如果是安装在项目中且开发时依赖，那么只能在npm的script中编写webpack打包命令
    无论是commonjs风格还是module风格，都可以通过webpack打包生成浏览器支持的格式
    在webpack打包的加持下（配合去掉package.json的type配置），module模式也可以实现导入文件夹与去掉扩展名

<!-- <script type="module" src="src/index.js"></script> -->
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

/***************************index.js***********************/
// module风格，node通过配置type支持，浏览器支持
import m1 from './module1'
import m3 from './module3'
m1()
m3()

// commonjs风格，node默认支持，浏览器不支持
// let m1 = require("./module1")
// let m3 = require("./module3")
// m1()
// m3()
/***************************module1.js***********************/
// commonjs
// module.exports = function(){
//     console.log('m1')
// }
// module
export default function(){
    console.log('m1')
}
/***************************module3/index.js***********************/
// commonjs
// module.exports = function(){
//     console.log('m3')
// }
// module
export default function(){
    console.log('m3')
}

# package.json
{
  "scripts": {
    "aa": "echo 123",
    "bb": "webpack --mode production"
  },
  "dependencies": {
    "jquery": "^2.1.2"
  },
  "devDependencies": {
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1"
  }
}

参考：

1天搞定SpringBoot+Vue全栈开发(https://www.bilibili.com/video/BV1nV4y1s7ZN)