管理和服务分离

src/api/blog.ts

@@ -33,6 +33,9 @@ const update_blog_type = (params: Object) => {
   return request({
     url: '/blog/update_blog_type',
     method: 'post',
+    headers: {
+      'Content-Type': 'application/json;charsetset=UTF-8'
+    },
     data: params
   })
 }

src/components/common/Tab.vue

@@ -61,8 +61,8 @@ const emit = defineEmits(['on-click'])
 const clickTap = () => {
   is_edit.value = !is_edit.value
   const params = {
-    section_id: props.row_key,
-    section_name: props.tab_text
+    id: props.row_key,
+    name: props.tab_text
   }
   emit('on-click', params)
   onLeave()

src/entity/index.ts

@@ -12,4 +12,9 @@ type BlogType = {
   blog_list: Blog[]
 }
 
-export { Blog, BlogType }
+type User = {
+  id: string,
+  username: string
+}
+
+export { Blog, BlogType, User }

src/main.ts

@@ -3,20 +3,18 @@ import App from './App.vue'
 import ElementPlus from "element-plus";
 import 'element-plus/dist/index.css'
 import router from './router'
-
 // vue store
 import { createPinia } from 'pinia'
 const store = createPinia()
 
 let app = createApp(App)
 
-
 app.use(router)
 app.use(ElementPlus)
 app.use(store)
-
-import { getToken } from './utils/auth'
-const whiteList = ['/', '/blog']
+import { getToken, getUser } from './utils/auth'
+import { User } from './entity/index'
+const whiteList = ['/login']
 let url = window.location.href
 console.log(url)
 if (url != 'http://localhost:3000/') {
@@ -44,21 +42,34 @@ router.beforeEach((to, from, next) => {
   console.log(from.path, to.path)
 
   const token = getToken()
+  if (typeof token === 'string') {
     if (to.path === '/login') {
       if (token) {
-      next('/home')
+        next('/')
+      }
+    } else if (to.path === '/') {
+      const user = <User>(JSON.parse(getUser() as string))
+      console.log(user)
+      if (user) {
+        router.push({
+          path: '/home',
+          query: user
+        })
+      }
     } else {
       next()
     }
-  }
-
 
 
+  } else {
     if (whiteList.includes(to.path)) {
       next()
     } else {
-    next()
+      next('/login')
     }
+
+  }
+
 })
 
 

src/router/index.ts

@@ -12,13 +12,6 @@ const routes: Array<RouteRecordRaw> = [
           name: '控制台'
         }
       },
-      {
-        path: '/tools',
-        component: () => import('../view/tools/index.vue'),
-        meta: {
-          name: '工具'
-        }
-      },
       {
         path: '/blog',
         component: () => import('../view/blog/index.vue'),

src/store/user.ts

@@ -1,6 +1,7 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { authorize } from '../api/user'
 import { getToken, setToken, resetToken, setUser, getUser } from '../utils/auth'
+import { User } from '../entity/index'
 
 /**
  * Simulate a login
@@ -13,11 +14,6 @@ import { getToken, setToken, resetToken, setUser, getUser } from '../utils/auth'
 //   return Promise.reject(new Error('invalid credentials'))
 // }
 
-type User = {
-  id: string,
-  username: string
-}
-
 export const useUserStore = defineStore({
   id: 'user',
   state: () => ({

src/utils/request.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { getToken } from '../utils/auth'
 
 const service = axios.create(
   {
@@ -8,18 +9,18 @@ const service = axios.create(
   }
 )
 
-// service.interceptors.request.use(
-//   config => {
-//     // if (true) {
-//     //   config.headers['Authorization'] = 'Bearer' + getToken('user-token')
-//     // }
-//     // return config
-//   },
-//   error => {
-//     console.log(error)
-//     return Promise.reject(error)
-//   }
-// )
+service.interceptors.request.use(
+  config => {
+    if (typeof getToken() === 'string') {
+      (config as any).headers['Authorization'] = 'Bearer' + getToken()
+    }
+    return config
+  },
+  error => {
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
 
 // service.interceptors.response.use(
 //   response => {

src/view/blog/createBlog.vue

@@ -43,24 +43,6 @@ let blog_tab = reactive<Tab>(<Tab>{
 const data_type_list = reactive<BlogType[]>([])
 let checkedIndex = ref<number>(0)
 
-data_type_list.push({
-  blog_type_id: '1',
-  blog_type_name: 'xxx',
-  blog_list: []
-})
-// data_type_list[0].blog_list.push({})
-data_type_list.push({
-  blog_type_id: '2',
-  blog_type_name: 'yyy',
-  blog_list: []
-})
-data_type_list.push({
-  blog_type_id: '3',
-  blog_type_name: 'zzz',
-  blog_list: []
-})
-
-
 const blog_type_list = reactive<BlogType[]>([])
 get_user_blogs({}).then(response => {
 
@@ -87,8 +69,11 @@ const handleCheck = (id: string) => {
   return type_tab.id == id
 }
 const saveType = (params: any) => {
-  console.log(params)
-  update_blog_type(1).then(response => {
+  const query = {
+    blog_type_id: params.id,
+    blog_type_name: params.name
+  }
+  update_blog_type(query).then(response => {
 
   })
 }

src/view/tools/cal.vue

@@ -1,122 +0,0 @@
-<template>
-  <div style="display: flex; align-items:center;">
-    <el-input
-      class="text_input"
-      v-model="input.in"
-      v-on:input="handle(data.from, data.to)"
-      :maxlength="20"
-      placeholder="请输入"
-    />
-    <el-icon :size="10" style="margin-left: 10px;">
-      <Right />
-    </el-icon>
-    <div class="text_output">
-      <span>{{ input.out }}</span>
-      <el-icon :size="20" @click="copyNumber" class="click-icon">
-        <CopyDocument />
-      </el-icon>
-    </div>
-
-    <el-tag
-      class="ml-2 click-icon"
-      v-show="isPlus"
-      type="success"
-      @click="clickPlus"
-      :data-clipboard-text="input.out"
-    >+</el-tag>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { CopyDocument, Right } from "@element-plus/icons-vue";
-import { reactive } from 'vue'
-import copy from 'copy-to-clipboard';
-import { h } from 'vue'
-import { ElNotification } from 'element-plus'
-
-// 从父组件接受参数
-type Props = {
-  data: {
-    from: number,
-    to: number
-  },
-  isPlus: boolean
-}
-const tt = defineProps<Props>()
-
-// 对输入框进行响应式
-let input = reactive({
-  in: '',
-  out: ''
-})
-
-// 进制转换控制器
-const handle = (from: number, to: number) => {
-  if (from == 10) {
-    convert10to(input.in, to)
-  }
-  if (to == 10) {
-    input.out = parseInt(input.in, from) + ""
-  }
-}
-
-// 进制转换函数1
-const convert10to = (value: number | string, binary: number) => {
-  if (value == '' || value == undefined) {
-    input.out = ''
-    return
-  }
-  let space = ' '
-  // if (false == false) {
-  //   space = ''
-  // }
-  const tmp = Number(value).toString(binary)
-  let firstByte = tmp.length > 3 ? tmp.substring(0, 4) : tmp.substring(0, tmp.length)
-  for (let a = 4; a < tmp.length; a = a + 4) {
-    firstByte = tmp.substring(a, a + 4) + space + firstByte
-  }
-  input.out = firstByte
-}
-
-// 复制转换成功的数值，并提示 复制成功 信息
-const copyNumber = () => {
-  copy(input.out)
-  ElNotification({
-    title: '',
-    message: h('i', { style: 'color: teal' }, '复制成功'),
-  })
-}
-
-// 通知父组件增加一行，并提示 增加成功 信息
-const emit = defineEmits(['on-clickplus'])
-const clickPlus = () => {
-  emit('on-clickplus')
-  ElNotification({
-    title: '',
-    message: h('i', { style: 'color: teal' }, '增加成功'),
-  })
-}
-</script>
-
-<style scoped>
-.text_input {
-  width: 300px;
-  font-size: 12px;
-}
-.text_output {
-  width: 300px;
-  border-radius: 4px;
-  height: 30px;
-  border: 1px solid rgba(151, 151, 151, 0.3);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: 10px;
-}
-span {
-  font-size: 12px;
-}
-.click-icon {
-  cursor: pointer;
-}
-</style>

src/view/tools/frame.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="frame_box">
-    <unit class="unit_one"></unit>
-  </div>
-  <div class="unit_box" v-for="(index) in total">
-    <unit class="unit_one"></unit>
-  </div>
-  <el-tag class="ml-2 click-icon" type="success" @click="add">增加一组</el-tag>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import unit from './unit.vue'
-let total = ref(0)
-const add = () => {
-  total.value++
-}
-</script>
-
-<style>
-.unit_box {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-top: 1px solid rgba(151, 151, 151, 0.3);
-  border-bottom: 1px solid rgba(151, 151, 151, 0.3);
-}
-</style>

src/view/tools/index.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="tools">
-    <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="User" name="first">User</el-tab-pane>
-      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
-      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
-      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
-    </el-tabs>-->
-    <el-tabs type="border-card">
-      <el-tab-pane label="进制转换">
-        <frame />
-      </el-tab-pane>
-      <el-tab-pane label="JSON格式化">JSON格式化</el-tab-pane>
-      <el-tab-pane label="颜色识别">颜色识别</el-tab-pane>
-      <el-tab-pane label="SQL格式化">SQL格式化</el-tab-pane>
-      <el-tab-pane label="SQL生成器">SQL生成器</el-tab-pane>
-      <el-tab-pane label="XML格式化">XML生成器</el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { TabsPaneContext } from 'element-plus'
-import frame from './frame.vue'
-const activeName = ref('first')
-
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-}
-</script>
-
-<style>
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-</style>

src/view/tools/unit.vue

@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <div class="unit_tag" style="margin-bottom: 10px;">
-      <el-tag class="ml-2">from</el-tag>
-      <div :class="'ml-1-' + index" v-for="(item, index) in colorup.list">
-        <el-tag class="ml-2" :style="item.style" style @click="onChange(item.binary, item.flg, index)">{{ item.text }}
-        </el-tag>
-      </div>
-    </div>
-    <div class="unit_tag" style="margin-bottom: 10px; border-color: red;">
-      <el-tag class="ml-2" style="width: 47.625px">to</el-tag>
-      <div :class="'ml-1-' + index" v-for="(item, index) in colordown.list">
-        <el-tag class="ml-2" :style="item.style" @click="onChange(item.binary, item.flg, index)">{{ item.text }}
-        </el-tag>
-      </div>
-    </div>
-    <div class="test" style="margin-bottom: 10px; border-color: red;" v-for="(index) in total">
-      <Cal @on-clickplus="add" :data="t2t" :isPlus="total == index"></Cal>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { reactive } from 'vue'
-import Cal from './cal.vue'
-import { from_static_data, to_static_data } from '../../const/const'
-// 初期默认只有一个转换框，点击+号时增加一个转换框
-let total = ref(1)
-const add = () => {
-  total.value++
-}
-
-
-// 相应式的 from 和 to，  
-const t2t = reactive({
-  from: 10,
-  to: 2
-})
-
-const colorup = reactive(JSON.parse(JSON.stringify(from_static_data)))
-colorup.list[2].style = 'background-color: gold'
-const colordown = reactive(JSON.parse(JSON.stringify(to_static_data)))
-colordown.list[0].style = 'background-color: gold'
-
-//
-const onChange = (binary: number, isFrom: boolean, index: number) => {
-  if (isFrom) {
-    t2t.from = binary
-    colorup.list.forEach((value: any, i: any) => {
-      if (i == index) {
-        value.style = 'background-color: gold'
-      } else {
-        value.style = 'background-color: #F8F8FF'
-      }
-    })
-
-  } else {
-    t2t.to = binary
-    colordown.list.forEach((value: any, i: any) => {
-      if (i == index) {
-        value.style = 'background-color: gold'
-      } else {
-        value.style = 'background-color: #F8F8FF'
-      }
-    })
-  }
-}
-</script>
-
-<style>
-.unit_tag {
-  display: flex;
-}
-
-.test {
-  display: flex;
-}
-
-.ml-2 {
-  margin-right: 10px;
-  margin-left: 10px;
-}
-</style>