最后更新时间 2023/03/24 00:53 ---添加 前/后/独享/组件路由
---- 华丽的时间分割线 ----
h5页面课程设计1(自己寻找目标页面，要求大致轮廓)：
基本语法：晚些时候补上，通过这次页面编写，加深了对html一些布局属性的影响，毕竟以前我很抵触前端(?)，现在慢慢有感觉了
h5部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿csdn博客布局</title>
</head>
<link rel="stylesheet" type="text/css" href="static/css/index.css">
<body>
<header>
<nav class="menu_content">
<ul>
<li><a href="#">网站logo</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于我</a></li>
</ul>
</nav>
</header>
<div class="main">
<hr>
<!-- 左边栏-->
<aside class="left">
<div class="l0"><p>博主信息</p></div>
<div class="info">
<img src="static/img/mysql.jpg" width="50" height="50">
<p class="username"><a href="#">***</a></p> <br>
<p class="fans"><a href="#">粉丝数量:100w+</a></p>
<p class="subscribe"><a href="#">订阅数量:50+</a></p>
</div>
<div class="l1">
<p>热门文章</p>
<div class="article">
<p><a href="#">mysql从入门到精通</a></p>
<p><a href="#">java从入门到精通</a></p>
<p><a href="#">kali从入门到入狱</a></p>
</div>
</div>
</aside>
<!-- 右边栏-->
<aside class="right">
<div class="r0">分类专栏</div>
<div class="r1">
<p><a href="#"><img src="static/img/mysql.jpg" width="20" height="20"> mysql相关 5篇</a></p>
<p><a href="#"><img src="static/img/mysql.jpg" width="20" height="20"> tomcat相关 2篇</a></p>
<p><a href="#"><img src="static/img/mysql.jpg" width="20" height="20"> nginx相关 3篇</a></p>
<p><a href="#"><img src="static/img/mysql.jpg" width="20" height="20"> redis相关 4篇</a></p>
</div>
<div class="r2">
<p>留言</p>
</div>
<div class="r3">
<p>***：你好博主 回复 </p>
<p>***：你好博主 回复 </p>
<p>***：你好博主 回复 </p>
<p>***：你好博主 回复 </p>
</div>
</aside>
<!-- 中间栏-->
<aside class="middle">
<article class="arts">
<h1>MySQL的N种优雅食用方法</h1>
<article class="describe">
<h2>在这里为大家介绍MySQL的一些优雅使用方法</h2>
<p>总所周知MySQL是一种关系型数据库......</p>
</article>
</article>
<article class="arts">
<h1>MySQL的N种优雅食用方法</h1>
<article class="describe">
<h2>在这里为大家介绍MySQL的一些优雅使用方法</h2>
<p>总所周知MySQL是一种关系型数据库......</p>
</article>
</article>
<article class="arts">
<h1>MySQL的N种优雅食用方法</h1>
<article class="describe">
<h2>在这里为大家介绍MySQL的一些优雅使用方法</h2>
<p>总所周知MySQL是一种关系型数据库......</p>
</article>
</article>
<article class="arts">
<h1>MySQL的N种优雅食用方法</h1>
<article class="describe">
<h2>在这里为大家介绍MySQL的一些优雅使用方法</h2>
<p>总所周知MySQL是一种关系型数据库......</p>
</article>
</article>
<article class="arts">
<h1>MySQL的N种优雅食用方法</h1>
<article class="describe">
<h2>在这里为大家介绍MySQL的一些优雅使用方法</h2>
<p>总所周知MySQL是一种关系型数据库......</p>
</article>
</article>
</aside>
<hr>
</div>
<!--底部栏-->
<footer class="footer_content">
<p>本站为非盈利性个人网站，所有文章版权均属于其源作者所有。</p>
<p>如有侵权，敬请来信联系我们，我们立即删除。</p>
<p>站长邮箱：***</p>
<p>Copyright © 2020-2023 All Rights Reserved. <a href="https://beian.miit.gov.cn/">备案号：***</a></p>
</footer>
</body>
</html>
css部分
body {
background-color: #f7f7f7;
}
/*头部布局*/
.menu_content ul li {
width: 150px;
height: 35px;
background-color: #f7f7f7;
list-style: none;
text-align: center;
line-height: 35px;
overflow: hidden;
padding: 10px;
margin-top: 20px;
margin-left: 20px;
/* 1float */
float: left;
}
.menu_content li:nth-child(2n) {
/*display: block;*/
/*background-color: lemonchiffon;*/
}
.menu_content ul li:hover {
background-color: lemonchiffon;
}
.menu_content a {
color: royalblue;
text-decoration: none;
}
/*中间布局*/
.main {
/*不跟随浮动*/
clear: both;
padding-top: 10px;
}
.left {
float: left;
/*使用颜色做出区分*/
/*background-color: #dac7c7;*/
width: 250px;
/*去上边和下边空隙*/
margin: 0;
}
.l0 {
text-align: center;
/*border: px;*/
}
.info, first-child {
text-align: left;
border: 1px solid;
}
.middle {
background-color: snow;
/*width: 524px;*/
text-align: center;
/*position: relative;*/
/*padding-left: 300px;*/
left: 300px;
/*自适应变化*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*padding-left: 10px;*/
}
.right {
float: right;
/*background-color: gray;*/
width: 250px;
margin: 0;
}
/*内容布局*/
.r1, p, a {
margin: 0;
text-decoration: none;
}
.r1, first-child {
font-size: 20px;
padding-left: 20px;
background-color: snow;
}
.l0, .l1, .r0, .r2, .info {
text-align: center;
/*background-color: #43bff5;*/
opacity: 0.2;
background: transparent;
border-top: 1px solid black;
/*padding-top: 20px;*/
}
.l1, .r2 {
padding-top: 20px;
}
.info{
padding-left: 20px;
}
.info, .username, .fans, .subscribe {
display: inline-block;
}
.r3, .first-child {
font-size: 20px;
padding-left: 20px;
}
.footer_content {
text-align: center;
}
/*height*/
.left, .right {
height: 200px;
}
.middle {
height: 650px;
}
.arts {
margin: 0;
padding: 0.3rem;
background-color: #eee;
font: 1rem 'Fira Sans', sans-serif;
}
.arts > h1,
.describe {
margin: 0.5rem;
padding: 0.3rem;
font-size: 1.2rem;
}
.describe {
background-color: white;
}
.describe > h2,
.describe > p {
margin: 0.2rem;
font-size: 1rem;
}首先是教程网址：
vue2 介绍 — Vue.js (vuejs.org)
vue3 Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
为了方便笔记 以下除了代码内部，再提到的vue2，vue3 均简写v2和v3，vue.js包引入，随便百度就能搜到，不做提及
原先html
<div>{{msg}}</div> <<!-- 这个是容器 -->>
<script>
// vue2创建应用实例
方法一
// var vm =new Vue({
// el:"#root",
// data:{
// message:"hello world",
// age:22
// }
// })
方法二 这种方式是需要返回data中的数据
new Vue({
el: '#root',
data: function () {
return {
message: "hello",
age: "22"
}
}
})
</script>
需要注意的是，这个创建方法是vue2的，vue3见下（官方例子）
```html```<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
```js```
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
v2：
MVVM模型
1.M 模型（Model）：对应data中数据
2.V 视图 （View）：模板 对应html中的 {{message}} (即是View)
3.VM 视图模型（ViewModel）：Vue实例对象
{{message}} 中可以写的内容 vue对象中出现的内容都可以用（f12能看到的对象）全都能在模板中用 v-on,v-bind....绑定....比如原先html中的 onclick事件，使用vue之后可以简写 v-on:click="method_name" ==>v-on:click="showInfo"v-on 简写语法 @click ==> @click="showInfo"
##数据代理<button v-on> 事件处理 new Vue({ el:'', data:{ }, methods:{ 可以写入多个事件 // method_name(){},showInfo(){ }} }) vue中事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 （e.stopproprgation()） vue中写法 @onclick.stop 3.once:事件只触发一次 4.capture:使用事件的捕获模式 5.self:只有event，target是当前操作的元素是自己才触发事件 6.passive:当前默认行为立即执行，无需等待事件回调执行完毕 键盘事件 @keydown @keyup 回车keycode==13@keyup.enter 按下回车
vue中常用按键别名
enter，delete，esc，space，tab(必须配合keydown使用，ctrl，alt，shift，meta（win键/command键）)，up，down，left，right
组件 （入门） new Vue 是创建vm视图模型，div.id绑定view视图<div id="root">
<Xuesheng></Xuesheng>
</div>
<script>
Vue.config.productionTip = false
// 组件
// 定义一个学生组件
const student = Vue.extend({
template: `
<div>
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
`,
data() {
return {
name: "lee",
age: 10
}
}
})
new Vue({
el: "#root",
components: {
xuesheng: student
}
})
</script>
---- 华丽的时间分割线 ----
ajax
使用jQuery发送ajax请求
//使用Ajax向后台发送请求案例，用户注册时候，我们可以通过当前失去焦点，在不经意间对用户名做一个查询，并反馈给用户
//对于一个账号来说，是不允许出现同一用户名的，所以我们需要在用户注册时候进行校验
$(function () {
// jQuery选中id
$("#name").blur(function () {
// 测试是否获取成功，成功即弹窗
// alert("aaaa")
// 获取输入的用户名
var value = $("#name").val();
// 测试是否正常获取值，成功即弹窗
// alert(value)
// 发出ajax请求，验证用户名是否存在
$.ajax({
url: "/user/checkName",
data: {
// 请求值
"name": value
},
// 请求方法
type: "post",
// 返回值方式 json
dataType: "json",
success: function (data) {
// alert("data:"+data)
if (data) {
// 用户存在 data=false
$("#warn").html("用户名已存在，请更换")
alert("真值"+data)
} else {
// 用户不存在 data=false
$("#warn").html("用户名可用")
}
}
})
});
})---- 华丽的时间分割线 ----
在vue中使用axios
npm(cnpm) install --save axios
复写axios request api
// 对axios进行二次封装
import axios from "axios"
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"
// 利用axios对象方法create，创建axios实例
const requests = axios.create({
//参照vue官方教程
baseURL:"/api",
//等待时间
timeout:10000,
});
// 请求拦截
requests.interceptors.request.use((config)=>{
// 进度条开始动
nprogress.start();
// config:headers请求头
return config
});
// 响应拦截器
requests.interceptors.response.use((res)=>{
// 进度条结束
nprogress.done();
// 成功返回回调函数，服务器响应返回来数据后，响应拦截可以检测，做其它事情
return res.data;
},(error)=>{
nprogress.done();
// 响应失败回掉函数
return Promise.reject(new Error('fail'));
});
// 对外暴露
export default requests;测试向后台服务器发送请求
// api统一管理
import requests from "@/api/request";
export const getUserInfo = () => {
// 发请求
return requests({
url:'/user/getUserInfo',
method:'get'
})
}此时出现了一个跨域问题，我们需要处理跨域，（跨域是指，出现了端口，ip，不一致得情况，此时需要解决跨域）
在webpack项目中，我们需要改动 名称忘了 ，在vue中 ，需要改动vue.config.js文件，该文件同等于webpack中的配置文件
// 代理跨域
devServer:{
port:8080,
proxy:{
// /api 指 匹配请求url中携带有/api的才发送代理请求，否则不适用代理服务器
'/api':{
// 数据来自那台服务器？
target:'http://localhost:8081/',
// 路径重写
pathRewrite:{'^/api':''},
}
}
},实现效果如下：
---- 华丽的时间分割线 ----
jwt(JSON Web Tokens - jwt.io)更多信息详见官网
java部分，需要在用户登录成功后将生成的jwt响应给前端，前端进行存储，下次请求需要携带此jwt，后端决定其是否有对应权限，获得登录信息之类的校验
jwt utils工具类
package xyz.leeyangy.framework.jwt;
//import org.springframework.boot.context.properties.ConfigurationProperties;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.ObjectUtil;
import io.jsonwebtoken.*;
import lombok.Data;
import lombok.Value;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import xyz.leeyangy.framework.constants.JwtConstant;
import java.util.Date;
@Data
@Slf4j
@Component
//@ConfigurationProperties(prefix = "leeyangy.jwt")
public class JwtUtils {
private String header;
/**
* 生成jwt token
*/
public String generateToken(long userId) {
Date nowDate = new Date();
//过期时间
Date expireDate = new Date(nowDate.getTime() + 604800 * 1000);
return Jwts.builder()
.setHeaderParam("typ", "JWT")
.setSubject(userId+"")
.setIssuedAt(nowDate)
.setExpiration(expireDate)
.signWith(SignatureAlgorithm.HS512, JwtConstant.TokenSingKey)
.compact();
}
public Claims getClaimByToken(String token) {
try {
return Jwts.parser()
.setSigningKey(JwtConstant.TokenSingKey)
.parseClaimsJws(token)
.getBody();
}catch (Exception e){
log.debug("validate is token error ", e);
return null;
}
}
/**
* token是否过期
* @return true：过期
*/
public boolean isTokenExpired(Date expiration) {
return expiration.before(new Date());
}
}vuex && Pinia(介绍 | Pinia 中文文档 (web3doc.top))
Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态
# 安装
yarn add pinia
# 或者使用 npm
npm install pinia
# 在main.js中引入 v3
import { createPinia } from 'pinia'
app.use(createPinia())
# v2
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// 其他选项...
// ...
// 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
// 同一个页面
pinia,
})
路由缓存：
作用：让不展示的路由组件保持挂载，不被销毁
在需要路由的组件添加keep-alive标签
<!-- 单个缓存路由 -->
<keep-alive inclue="you_compent_name">
<router-view></router-view>
</keep-alive>
<!-- 多个缓存路由 -->
<keep-alive :inclue="['1','2','...']">
<router-view></router-view>
</keep-alive>
路由守卫：
1.全局前置：
router.beforeEach( (to,from,next)=>{
console.log(to,from)
// 使用if判断，自行添加条件
// 放行
next()
})2.全局后置： 在路由组件中使用 meta
// meta:{false}
....
{
path: '/articles/add',
component: ArticleAdd,
name: `articleAdd`,
meta:{isAuth:false},
},
router.afterEach( (to,from,next)=>{
console.log(to,from)
// 使用if判断，自行添加条件
// 放行
next()
})
3.独享路由
......略......
4.组件路由
一些vue3路由传参：
vue3的setup中如何使用this.$route获取内容？
// v2原来是这样的 value是你需要拿到的值比如说 id，就把value换成id
this.$route.params.value
// 在v3中，我需要的路由传参，需要这样拿到值
// router，这是自己定义的，
router.currentRoute.value.params.idv3中获取响应头中内容
封装axios，添加拦截器
import axios from 'axios'
import router from '../router'
import store from '../store'
import nprogress from "nprogress";
import {Dialog} from "vant";
axios.defaults.baseURL = "/api"
// 设置请求头
let reqInstance = axios.create({
headers: {
Authorization: 'Bearer ${localStorage.getItem("access_token")'
}
})
// 前置拦截
axios.interceptors.request.use(config => {
nprogress.start();
return config
})
axios.interceptors.response.use(response => {
let res = response.data;
console.log("=================")
console.log(res)
console.log("=================")
if (res.code === 200) {
nprogress.done();
// Element.Message.success(res.message, {duration: 3 * 1000})
return response
} else {
// Element.Message.error(res.message, {duration: 3 * 1000})
return Promise.reject(response.data.msg)
}
},
error => {
// console.log(error)
if (error.response.data) {
error.message = error.response.data.msg
}
if (error.response.status === 401) {
store.commit("REMOVE_INFO")
router.push("/user/login")
}
Element.Message.error(error.message, {duration: 3 * 1000})
return Promise.reject(error)
}
)对需要引入的组件进行引入
最终达成的效果如下：
初始化：
最终效果：
最后就是将上述结果持久化到本地，如果不持久化的话，浏览器一刷新，数据就清掉了
我的pinia
import {defineStore} from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useUserStore = defineStore('auth', {
// other options...
state: () => {
return {
isLogin: 0,
isAuthenticated: false,
Authorization: localStorage.getItem('USER_TOKEN'),
user: localStorage.getItem('USER_INFO')
}
},
// computed修饰一些值
getters: {
// 通过getter对state状态修改
getAuthenticated: state => state.isAuthenticated,
getUser: state => state.user,
getAuthorization: state => state.Authorization,
},
// method 可以同步异步做提交state
actions: {
// 设置认证，登录状态
setAuth(isAuth: boolean) {
if (isAuth) {
//在pinia中this指代state
this.isAuthenticated = isAuth;
} else {
this.isAuthenticated = false;
}
},
// 保存用户信息
setUser(user: any) {
if (user) {
this.user = user;
} else {
this.user = {};
}
},
setAuthorization(Authorization){
if(Authorization){
this.Authorization = Authorization;
}else {
this.Authorization = '';
}
},
setIsLogin(){
if(this.Authorization!=null && this.user!=null){
this.isLogin = 1;
}else {
this.isLogin = 0;
}
}
}
})接着在需要持久化的组件上添加pinia订阅，使其能够监听值的变化
// 持久化
this.store.$subscribe((mutation, state) => {
localStorage.setItem("USER_TOKEN", this.store.getAuthorization)
localStorage.setItem("USER_INFO", this.store.getUser)
localStorage.setItem('USER_LOGIN',this.store.isLogin)
});nodejs报错，版本问题
package.json添加
"scripts": {
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},vue生命周期 暂略
---- 华丽的时间分割线 ----
v2转v3脚手架
export default defineConfig({
server: {
proxy: {
// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
'/foo': 'http://localhost:4567',
// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
// 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, ''),
},
// 使用 proxy 实例
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
},
// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
'/socket.io': {
target: 'ws://localhost:5174',
ws: true,
},
},
},
})