前端Vue

怕雨伞淋湿

已于 2022-11-17 16:42:53 修改

阅读量1k

点赞数

文章标签： java

于 2022-04-10 18:38:40 首次发布

本文链接：https://blog.csdn.net/m0_51672985/article/details/124083131

版权

前端具体操作

在package中

改成
第一步："core-js": "3.18.3",
第二步：cnpm i

第三步： cnpm install --save core-js

第四步npm run dev

但最后就是自动变成了，如下的情况
"core-js": "^3.23.5",

一：创建vue工程

1，从cmd直接进入命令：vue ui

2，关闭git仓库

3，选择手动

4，开启Router和Vuex，关闭Linter

5，选择默认2.x

6，不预设

二：安装组件

1，安装Element UI

cnpm i element-ui -S

然后在main.js中加入以下代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2，安装Axios

cnpm install axios -S
然后在main.js中加入以下代码

import axios from 'axios'
Vue.prototype.$axios = axios

3.安装cass样式

cnpm i -D node-sass@4.14.1 sass-loader@7.3.1

4.安装fuse.js

cnpm install --save fuse.js

5.安装全屏

cnpm i screenfull@5.1.0

6.cnpm install path-browserify

在vue.config.js中module.exports = {}

添加

configureWebpack: {
resolve: {
fallback: { path: require.resolve("path-browserify") },
},
},

7.安装js-cookie

cnpm install js-cookie --save

8.安装解密

cnpm install jsencrypt --dep

9.安装树形组件

cnpm install --save @riophae/vue-treeselect

10.在安装svg-sprite-loader需要使用命令的形式，不能使用backage直接加入，否则会报错
npm i -D svg-sprite-loader

在每次安装新的依赖时，需要进入文件夹中删除miniprogram_npm的文件夹，然后再工具里面进行npm重构,这样就会再次生成miniprogram_npm

10.安装vant-weapp

D:\wxproject-compoent\miniprogram>

npm init -y

npm i @vant/weapp -S --production

npm i vant-weapp -S --production

打开微信开发者工具，点击 工具 -> 构建 npm，由于新版所以在本地中没有npm模块

在app.son中

"usingComponents": {

"van-button": "vant-weapp/button"

}

11.安装在小程序中promise

npm install --save miniprogram-api-promise@1.0.4

在app.js中添加

import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

3，启动

npm run serve

4，在引用别人的前端项目时，需要
cnpm i (安装全部依赖)
npm run dev （启动项目）
或者进行一步终极方法，而不是选用cnpm
npm install --registry=https://registry.npmmirror.com

二：URL路径问题

1，方法无需参数

http://localhost:8089/user/test

1，无需参数
 @RequestMapping(value = "/test", method = RequestMethod.GET)
public String test(){}
http://localhost:8089/user/test

2，有参数
 @RequestMapping(value = "/get", method = RequestMethod.GET)
public SysUser getUser( String username){}

第一种方法：http://localhost:8089/user/get?username=chen
第二种方法：在postman中Params添加key-value

当参数过多时
第一种方法：http://localhost:8089/user/get?username=chen&password=123
第二种方法：在postman中Params添加多个key-value

public SysUser getUser( @RequestBody User user){}
上述的方法都适用，而且在postman中body中添加key-value也是使用

3，从前端带回数据
 @RequestMapping(value = "/get/{id}", method = RequestMethod.GET)
    public SysUser getUserById(@PathVariable("id") Integer userId){}
http://localhost:8089/user/1

解释：{id}要与PathVariable("id")一致即可，不要管userId,其意思是将id的值给userId,作为形参传递给函数，然后进行逻辑操作。

4，直接构造url：http://127.0.0.1:8080/user/wxIndex?accessToken=123456&expiresIn=42100"
5，构造多参数："https://api.weixin.qq.com/sns/oauth2/access_tokenappid=wx92b6693b8c01fc87" +"&secret=d734ba63f66b3b573d7cb1cdcb958eea&code=" + code+"&grant_type=authorization_code"

三，使用jwt是需要将其放入请求头中的具体做法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //声明作用
  state: {
    //从后端传过来的token，并赋值给前端中token
token:localStorage.getItem("token")
  },
  //mutation中的方法一般情况下是根据state中的值进行设定的
  mutations: {

SET_Token:(state,token)=>{

  state.token=token;
  localStorage.setItem("token",token)
}
  },
  getters:{
    getToken:state => {

      if (state.token==null)
      {
        return '';
      }else return state.token
    }

  },
  actions: {
  },
  modules: {
  }
})
如何使用前端设置的token
在vue页面中请求路径中加入请求头
headers:{
"Authorization":this.$store.getters.getToken
}
这样将把后端中生成Jwt，以请求头的形式放到了url中，在拦截或者过滤中，使用resquest.getHeader("Authorization")就能能拿到后端传入的jwt,看是否过期等信息。

四，前端对响应的处理

编写axios.js文件

import axios from "axios";
import router from "@/router";
import Element from 'element-ui'


//默认路径
axios.defaults.baseURL="http://localhost:8089"

//进行后置响应处理

axios.interceptors.response.use(response =>{

let res=response.data

    if (res.code===200)
    {
return response
    }
    else if(res.code===401)
    {
        Element.Message.error(res.message,{duration:3*1000})
router.push("/login")
        return Promise.reject(res.message)
    }else
    {
        Element.Message.error(res.message,{duration:3*1000})
        return Promise.reject(res.message)
    }

})

2，将axios.js文件导入main.js文件中

import './axios'

3，补：对于url请求进行，默认添加

axios.defaults.baseURL="http://localhost:8089"

五，前端项目部署

1，npm run serve

2，生成dis文件夹

3，将dis文件中的内容全部复制到后端中static文件中

4，后端代码打包

闪电符号选中状态，就是出于亮显示，同时选项中test被划上横线
选中clear
选中package

5，在项目中没有看到target文件夹时，可以去磁盘中的项目位置去找

6，选中项目的jar包

7，使用cmd进去，命令 java -jar shiro.jar

8，输入请求url，就能正常使用

注：如果项目中使用Redis，将原项目关闭那么都没有影响，只要不要把cmd关闭就行

二，云服务器部署

1，将windows中jar放到linux中文件夹下面

2，将前端中url地址转为服务器的地址

3，防火墙端口，是要与端口号一一致

firewall-cmd --list-ports 查看防火墙端口
firewall-cmd --zone=public --add-port=1234/tcp --permanent 防火墙开放端口
firewall-cmd --reload 刷新防火墙

4，在云服务器开启端口号

5，在linux中控制界面中启动java -jar shiro.jar

三,

https://blog.csdn.net/weixin_39921821/article/details/105448827

4,文件夹没有权限问题

https://www.cnblogs.com/XYH-Learning/p/16310707.html

5，运行vue项目,building modules卡住不动

就是vue文件中没有div的标签

十，vue的基础知识
import minio from "@/views/firmware/firmwareList/index"
{
  path: '/minio',
  name: 'minio',
  component: minio
},
"@/views/firmware/firmwareList/index"：是vue文件在views中具体位置

minio：是组件的名字

/minio:是路径的名字