程序人生

Vue3简单博客项目后台开发笔记

开发博客后端的一些简单记录

坑:reactive

对于reactive的使

reactive可以直接使用无需配合toRefs 但是如果需要动态加载数据,这是必要的.!

Element UI

开发时建议全量导入,按需导入是不是出一些奇怪的问题,浪费时间

关闭eslint

开发中最好关闭这个鬼东西.

关闭方法:

在项目根目录下增加vue.config.js文件。
内容如下：

1
2
3
4
// vue.config.js
module.exports = {
    lintOnSave: false
}

Axios跨域问题

http://xxhoz.com/2021/02/06/Vue-Axios%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/

只能在开发环境下跨域!!!!!!

Vue3编程式路由

1
2
3
4
import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/admin')

另外一个未尝试:

https://blog.csdn.net/weixin_48566243/article/details/114294364

Vue3路由参数获取

1
2
3
4
5
import { onBeforeRouteUpdate } from "vue-router";
//在setup中
onBeforeRouteUpdate((to) => {
      console.log(to, "=====");
    });
1
2
3
4
5
6
7
8
import { useRoute } from 'vue-router'

setup() {
	const route = useRoute()	
    watch(() => route.path,() => {
        console.log('监听到变化')
    }
}

axios拦截器的使用

1
2
3
4
5
6
7
axios.interceptors.request.use(config => {
  // 为请求头对象，添加token验证的Authorization字段
  config.headers.token = window.sessionStorage.getItem('token')
  return config
})

// response 同上

关于数据对接

最好开发时对应后端数据格式,不要图一时开发方便自定一个数据格式.否者后面改的头疼!!!!

v-md-editor的使用

这个简单 看官方文档:

http://ckang1229.gitee.io/vue-markdown-editor/zh/

路由守卫

这个很有用

1
2
3
4
5
6
7
8
// 挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to, from, next) => {
  if (to.path === '/login') { return next() }
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) { return next('/login') }
  next()
})

具体查看官方文档

错误解决

建议开发中打开控制台.尽可能解决所有警告!

Nginx解决跨域

前面跨域只在开发阶段有用.生成环境

nginx配置代理跨域:

1
2
3
location ^~ /api{
	proxy_pass http://blogapi.xxhoz.com/api;
}

完美解决