# NewsAdmin

**Repository Path**: paqri/news-admin

## Basic Information

- **Project Name**: NewsAdmin
- **Description**: 测试的内容
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-11
- **Last Updated**: 2022-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

该模板来自 ：@下落香樟树 的项目 vite_admin

# 本项目自带的页面：

layout

components中的Amap.vue,icons.vue,NotFound.vue,RouteViews.vue,WEditor.vue

views下的：admin，common，data，login 其中data是空内容，可以删除

模板中使用了vuex，增加了项目的复杂度，可以考虑替换为原生的Vue3.0的inject，provide。

# 本地部署

硬性要求：

Node.js ：`v16`(使用的eslint在14版本不能使用)，<a href="https://nodejs.org/en/download/">官网下载</a>

包管理器：yarn

```cmd
npm install -g yarn
```

并且建议配置yarn的包缓存安装路径，windows默认C盘(npm和yarn比起maven非常占用内存，使用yarn下载速度比npm稍微快一点)

```cmd
yarn config  set global-folder “”
yarn config set cache-folder “”
```

检查yarn 全局路径

```
yarn global bin
yarn global dir
```

下载yarn依赖

```cmd
yarn install
//或者
yarn
```

项目本地部署启动

```cmd
//cmd进入本地路径
yarn dev
```

项目构建

```cmd
//cmd进入本地路径
yarn build
```

前台的部署

前台系统使用的是html，可以直接打开(不建议)或者改host用live-server/nginx，并且用户信息储存在cookie中的，这里设置了cookie的domain，所以 如果不使用live-server+host正向代理或者nginx代理，cookie会没有信息，如果需要修改生效的地址，在assets/js/navigator-component还有login.html中，将所有的domain的内容进行改写

# 主体架构

### view

页面内容都在view中

admin文件夹下的 `AuthList.vue` 和`RoleList.vue`可以删除

没有使用选项式api

> 就是下面这种结构
>
> ```javascript
> <script>
>     export default{
> 		data(){
>             return {
>                 
>             }
>         },
>         methods{
>             
>         },
>         computed:{}
> 	}
> </script>
> ```
>
> 

组合式api的语法非常自由

> ```vue
> <script>
> import {computed, onMounted ,ref,reactive} from "vue"
> export default{
> 	//必须内容，里边的内容不需要严格按照data等等顺序来写，可以将很多操作放在一起
> 	setup(){
>         //相当于以前的data下的基础变量
>         const foo =ref(114514)
>         //相当于methods下的一个方法
>         const fooMethod = () =>{
>             console.log("我是随便定义的一个方法")
>         }
>         //相当于computed
>         const getUserId = computed( ()=>{
>             return foo.value+"1919810"
>         })
>         //相当于以前data下的对象，也可以使用ref定义变量，但reactive对内存消耗更小，建议对象使用reactive，但对象赋值最好用ref({})来定义对象,
>         const fooObject = reactive( {
>             name:"田所浩二",
>             age:"24"
>         })
>         
> 		onMounted( () =>{ console.log("我相当于mounted")})
> 		//如果你的变量/内容/方法要放到 `template` 中的html内使用，必须return
>         return { getUserId,
>                foo,
>                fooObject}
> 	}
> }
> </script>
> ```
>
> 如果不使用ref定义的变量`let a = "12"` 
>
> `ref`和`reactive`两者最明显的区别就是，ref的内容要进行访问需要使用.value才可以访问，reactive的内容可以直接调用(javascript代理模式)
>
> 那么这个变量不是响应式，这个变量如果return出去还可以展示，但在修改后无法在视图层动态变化

我本人写的的vue文件，除去部分的是项目原本自带的进行修改，都用上了`<script setup>`语法糖，就是在`<script>`上面加上一个setup，要在html上展示的内容不需要return进行导出,也不用写export default



### api ：

目前未编写， config文件夹下为所有api的全局配置，包含了对promise请求的二次封装，所有的请求都写在api文件夹下面，方便解偶，不同请求创建单独的文件夹和ApiUse文件

> 针对Restful api 的get，delete请求风格还有原生的get，delete请求风格(区别：get参数携带在?后面，restful的参数是/xxx)，本人封装了两份get和delete请求
>
> ```javascript
>/**
>  * 常规get请求
>  * @param {url} :调用api地址
>  * @param {params} :传入的参数
>  * @return {Promise} :返回请求结果
>  * @deprecated 已经写了个restGet封装，若使用restful风格写api，此方法弃用
> */
> export function get(url, params = {}) {
>   return new Promise((resolve, reject) => {
>     //调用上面的常量instance
>     instance
>       //传入的url地址和params参数使用
>       .get(url + `/${params.id}`)
>       .then((response) => {
>         resolve(response);
>       })
>       .catch((err) => {
>         reject(err);
>       });
>   });
> }
> 
> 
> /**
>  * post请求
>  * @param {url} :调用api地址
>  * @param {params} :传入的参数
>  * @return {Promise} :返回请求结果
> */
> export function post(url, data = {}) {
>   return new Promise((resolve, reject) => {
>     instance.post(url, data).then(
>       (response) => {
>         resolve(response.data);
>       },
>       (err) => {
>         reject(err);
>       }
>     );
>   });
> }
> /**
>  * 批量删除数据
>  * @param {url} :调用api地址
>  * @param {params} :传入的参数
>  * @return {Promise} :返回请求结果
>  */
> export const patch = (url, data) => {
>   return new Promise((resolve, reject) => {
>     instance.patch(url, data).then(
>       (response) => {
>         resolve(response.data);
>       },
>       (err) => {
>         reject(err);
>       }
>     )
>   })
> }
> /**
>  * 删除一条数据
>  * @param {url} :调用api地址
>  * @param {params} :传入的参数
>  * @return {Promise} :返回请求结果
> */
> export const restDelete = (url, params) => {
>   //针对上面封装的内容进行遍历，拼接url进行请求
>   //最后的请求会变成restapi的风格，直接发送就可以了
>   params.forEach(element => {
>     url += `/${element}`
>   })
>   //循环遍历params中的内容
>   return new Promise((resolve, reject) => {
>     instance
>       .delete(url)
>       .then((response) => {
>         resolve(response);
>       })
>       .catch((err) => {
>         reject(err);
>       });
>   })
> }
> 
> /**
>  * 删除一个内容
>  * @param {url} :调用api地址
>  * @param {params} :传入的参数
>  * @return {Promise} :返回请求结果
>  * @deprecated 此方法被弃用，已经写了个restDelete进行封装，可以调用多个参数
> */
> export const deleteApi = (url, data = {}) => {
>   return new Promise((resolve, reject) => {
>     instance.delete(url + `/${data.id}`).then(
>       (response) => {
>         resolve(response.data);
>       },
>       (err) => {
>         reject(err);
>       }
>     )
>   })
> }
> /**
>  * 
>  * @param {url} :调用api地址
>  * @param {params} :传入的参数
>  * @return {Promise} :返回请求结果
>  */
> export const put = (url, data = {}) => {
>   return new Promise((resolve, reject) => {
>     instance.put(url, data).then(
>       (response) => {
>         resolve(response.data);
>       },
>       (err) => {
>         reject(err);
>       }
>     )
>   })
> }
> ```
> 
> 

### utils：

axios，oss为模板自带内容，已经删除

constant.js中本来打算封装常量了，但这方面没太多经验，只把oss的地址给写了上去

too.js封装了一些工具方法，但其中`awaitwraper`有bug，最好不要使用

enums.js中将news中的状态进行转换，是和后台约定好的

### .env：

.env开头三个文件：测试环境，开发环境，部署环境的api开头的请求前缀

简单说，你用`yarn dev`启动项目就是配置` .env.development`,用`yarn build `启动就要配置`.env.development`，只有配置了才能在不同的环境中避免对源码修改

### components：

封装的组件，建议把能封装的组件，比如分片上传视频按钮放在这里。

本人学的不是特别好，基本没怎么封装，组件也是局部引用，这里致歉

### store：

Vuex配置，仅在全局的权限控制中使用了Vuex，存储的用户账号权限信息

对于Vuex的刷新后消息丢失处理采取读取sessionStorage的方法，这个方法在main.js中

### mock

用来进行拦截请求，随机模拟数据的，在后端没给数据时候就用mock

### router：

路由配置，index.js中为路由守卫(静态资源拦截器)和基本配置

router.js中为路由，请留意router.js中的内容，下面进行一个举例

```js
  const layoutMap = [{
        path: "editor",
        name: "Editor",
        meta: { title: "富文本编辑器", icon: "Document",roles:["admin","development"] },
        component: () => import("../views/common/Editor.vue")
    }]
```

这里表示，在你的token中，你的权限必须为admin或者development才可以进行访问

> 和后台进行了一点约定，只有超管普通管理员，所以写死了只有1和2，如果要改成后台提供路由位置这里和工具类的内容要全改，项目不是很大，所以是对meta进行的过滤

### 其他：

#### eslint：

eslint进行了代码风格规范，不建议删除它或注释它，并且已经把eslint的规范设置的非常松了，代码规范内容在.eslintrc.js中,当代码报错时候请留意代码风格

#### 补充 页面调用api的方式：

比如在ApiUse.js中，我写了如下接口

```javascript
import { get,post,deleteApi,patch,put } from "../../http";

export const queryPageDepartment = params => post("system/department/pagelist", params);
export const saveOrUpdateDepartment = params => post("system/department/save",params);
export const deleteOneDepartment = params =>deleteApi("/system/department",params)
```

那么我的页面中的调用，应该这样调用：

引入调用api的方法->生命调用api方法->执行这个方法

这里使用`as`方便我的代码生成器的使用

```vue
<template>
	<!-- 省略页面代码 -->
</template>
<!-- 使用Vue3.0 组合式api语法糖，可以不使用，也可以使用选项式api(不建议)-->
<script setup>
//Step1: 引入api的方法
import {
  deleteOneDepartment as deleteOne,
  queryPageDepartment as queryall,
  saveOrUpdateDepartment as saveOrUpdate,
} from "../../api/kill/killActivity/apiUse";
import { ref, onMounted } from "vue-demi";
    
//表格内容
const tableData = ref(null);
    
//Step2：调用api的方法
const getTableData = async () => {
  //请求的参数
  const params = {
    page: page.value,
    keyword: filters.name,
  };

  //请求数据建议使用trycatch包裹
  try {
    //使用async ，await语法糖进行回调,可以避免回调地狱，类似于原本的axios请求的.then(res =>{})
    const result = await queryall(params);
    total.value = result.data.total;
    tableData.value = result.data.rows;
  } catch (e) {
    //打印报错
    console.log(e);
  }
};
//Step3：执行方法
onMounted(() => {
  //mounted或beforemounted或created这三个钩子都可以发送ajax请求
  getTableData();
});
    
</script>
```

> 另外： 
>
> 若需要`webUploader.js`进行视频分片上传(视频请务必分片上传)，由于Vite打包项目使用的是js的UseStrict，请在项目根目录的`index.html`引如`webUploader`，否则会报JavaScript的严格模式相关异常
>
> 富文本编辑器使用的是`WangEditor4`，官网文档默认是`v5`请不要看错文档

#### 本人的一些碎碎念

这是我第一次和后端对接内容，后端的很多数据是已经给我定好了的，所以写的比较被动

大部分时间花在和后端的接口对接上，后端的接口有些地方的参数非常打脑壳，所以有的地方写的逻辑非常复杂(深拷贝，然后把不用的参数剔除，要用的参数赋值传过去，后端给的神奇参数23333)，下次遇到后端这么搞我直接把源码给他自己改（doge

当我知道还有个前台时候我的内心是崩溃的...前台写法就是vue2的选项式api，所以不多介绍(逻辑真复杂，97%的javascript...)，前台的架构可能非常low，这是我第一次写前台(诶嘿)

以下是作者原本自带的Markdown内容

# vite_admin

#### Project composition

vite2 + vue3 + vue-router4 + vuex4 + element-plus

#### Project setup

```
yarn install
```

#### Compiles and hot-reloads for development

```
yarn dev
```

#### Compiles and minifies for production

```
yarn build
```

#### Customize configuration
引用的
-   See [Vite](https://cn.vitejs.dev/)
-   See [Vue](https://v3.cn.vuejs.org/)
-   See [Vue Router](https://next.router.vuejs.org/)
-   See [Vuex](https://next.vuex.vuejs.org/)
-   See [Element Plus](https://element-plus.gitee.io/#/zh-CN)

### 页面展示

#### Login 用户登录

![Login](./src/assets/pages/login.png)

#### Index 控制台

![Index](./src/assets/pages/index.png)

#### Charts 数据图表

![Charts](./src/assets/pages/chart.png)

#### Data 数据管理

![Data](./src/assets/pages/data.png)

#### Editor 富文本编辑器

![Editor](./src/assets/pages/editor.png)

#### Player 西瓜播放器

![Player](./src/assets/pages/player.png)

#### User 个人中心

![User](./src/assets/pages/user.png)

#### 404 Not Found

![Not Found](./src/assets/pages/404.png)