# itsite-vue

**Repository Path**: starlight-flow/itsite-vue

## Basic Information

- **Project Name**: itsite-vue
- **Description**: 信息技术词条百科项目
- **Primary Language**: Unknown
- **License**: CC-BY-SA-4.0
- **Default Branch**: default_show
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-26
- **Last Updated**: 2024-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# it科普网站 vue项目技术文档

## 项目介绍

随着互联网发展，国内网民数量与日俱增。但是民众面临IT知识积累不足的问题，国内的IT方面目前没有一个很好的入门教学环境，人民迫切需要一个能解释信息技术相关词汇的平台来积累自己的知识量。本项目面向这些信息技术相关知识贫乏的民众设计的信息技术词条科普平台，负责记录信息技术词汇和它的含义解释，使用了前后端分离的结构，以vue框架作为前端部分，Flask框架作为后端部分。使用pandas第三方库处理数据，借助MYSQL数据库存储词条分类数据，编写平台是VS Code和Pycharm。考虑到当下多个大型百科平台的信息技术相关词条的解释比较零散，难以体现词条知识之间的关系性，为了降低行业外民众了解信息技术相关内容的难度，提高群众的信息素养，设计了一个可编辑内容的在线科普平台 

关键词
前后端分离，vue.js框架，flask框架，MYSQL数据库

## 目录

- [it科普网站 vue项目技术文档](#it科普网站-vue项目技术文档)
  - [项目介绍](#项目介绍)
  - [目录](#目录)
  - [当前计划](#当前计划)
  - [项目结构](#项目结构)
  - [mysql 树状结构左右值法-节点层级计算函数](#mysql-树状结构左右值法-节点层级计算函数)
  - [项目部署](#项目部署)
  - [vue开发记录](#vue开发记录)
    - [4-20](#4-20)
    - [4-19](#4-19)
    - [4-18](#4-18)
    - [2023-3-14](#2023-3-14)
    - [2022-10 至 2022-12](#2022-10-至-2022-12)
  - [Project setup](#project-setup)
    - [Compiles and hot-reloads for development](#compiles-and-hot-reloads-for-development)
    - [Compiles and minifies for production](#compiles-and-minifies-for-production)
    - [Customize configuration](#customize-configuration)

## 当前计划

- [x] 第二层节点水平布置，相应子节点垂直分布
- [x] 节点下的页面链接(后端查找page表数据，对分类节点id分组，前端递归判断节点是否在id分组里，是则显示链接)
- [x] 编辑页面
- [x] 登录系统
- [ ] 管理员登录接口
- [x] 自动登录(localstroage)
- [ ] 管理员sql库初始数据
- [ ] 用户账号级别
- [ ] 普通用户:修改词条
- [ ] 高级用户: +编辑词条所属类型
- [ ] 管理员:编辑分类树

## 项目结构

```txt
it_intro
├─cert  服务器证书目录，供SSL连接功能使用
├─dist  项目生产版本
├─node_modules(git已忽略)  node模块目录，存放 node.js 第三方库的资源文件
├─public  静态资源目录
│   └─certificate  localhost地址与CA的证书目录
└─src  资源目录，存放组件和主程序
    ├─assets  生产版本中压缩处理的静态资源目录
    │  ├─css
    │  └─img
    │      └─source AI作图原图片
    ├─components  组件
    ├─router  vue路由
    ├─store vueX状态管理
    └─views  视图
```

- readme.md: 技术文档
- .gitignore: git忽略配置文件，存放git不需要追踪的目录、文件信息
- .spa: gitee_page服务项目标识文件
- LICENSE: CC-BY-SA 4.0开源许可协议文件。声明本项目使用的开源许可证类型及许可行为
- vue.config.js: vue服务器配置文件

## mysql 树状结构左右值法-节点层级计算函数

查找节点的上级或子级时不需要递归查找，直接查找左右值的范围内的节点即可
>参考文献：树状二维数据表架构
>[树形结构的数据库表设计_小玩龙的博客-CSDN博客_树形数据库](https://blog.csdn.net/ghostrabbit/article/details/80050777)

```sql
delimiter //
CREATE FUNCTION `floor4`(`@node_id` int)
 RETURNS int
BEGIN
declare lft,rgt int;
declare output int;
set output = 0;
if exists(select Node_id from itsite.test where Node_id = @node_id) then
  begin  
      select lft = Lft, rgt = Rgt from itsite.test where node_id = @node_id;
      select output = count(*) from itsite.test where Lft <= lft and Rgt >= rgt;
  end;  
RETURN output;
end//
```

## 项目部署

安装nodejs环境、vue环境、vue-cli环境，使用vue-cli脚手架创建vue2项目，在项目文件夹里用git工具初始化并添加远程库，然后拉取远程库内容。

## vue开发记录

### 4-20

修复默认链接跳转404问题
问题原因：gitee page静态页面托管服务不支持直接访问url路径，仅支持前端路由跳转
解决方式：直接更改url参数，模拟跳转效果

更新内容：
初始化页面提示后端服务器连接状态
个人中心页面新增离线预览模式
新增全国污染指数前十城市柱状图，数据由百度云API提供(2023-4-23到期，离线数据日期为2023-4-20)

### 4-19

修复 目录界面的词条链接跳转出现404
问题原因：url参数包含中文，需要转码为UTF-8格式
解决方式：使用函数encodeURIComponent将中文转码后拼接url

### 4-18

新增内容:

- 更改 技术文档-开发记录 ,顺序调为逆序,合并2022年记录
- 新增词条离线模式视图，离线数据内容新增词条链接，将链接定向至词条离线模式页面，新增 wangEditor 开源富文本编辑器
- 修复编辑器输出内容，采用wangEditor官方的API获取文本
- 完善离线模式页面提示，词条在线介绍页面获取数据失败时显示离线页面链接

### 2023-3-14

更新打包文件，适配gitee page服务(更改vue.config.js中的module.exports>publicPath项的根路径名称)

### 2022-10 至 2022-12

 10-14

首页导航样式、背景样式完毕

 10-21

调试目录结构显示
更新目录结构展示页面

>参考文献：递归调用组件
[(18条消息) vue组件递归_Master.Yuan的博客-CSDN博客_vue 递归](https://blog.csdn.net/yuanwen52/article/details/122930427)

```js
<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <p>{{ item.name }}</p>
      <treeMenu :list="item.children"></treeMenu>
    </li>
  </ul>
</template>
<script>
export default {
  name: "treeMenu",
  props: ["list"],
  data() {
    return {};
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped>
ul {
  padding-left: 20px;
}
</style>
```

 10-22

调整页面结构样式

 10-26

验证节点的页面展示可行性

>参考文献：子组件传值
[(18条消息) vue中组件的props属性（详）_suoh's Blog的博客-CSDN博客_vue props](https://blog.csdn.net/qq_41579104/article/details/120997444)

新增的子组件传值代码

```js
<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <p>{{ item.name }} {{item}} </p>
      {/* 递归传递节点数据和页面信息 */}
      <treeMenu v-bind:list="item.children" :data_page="data_page"></treeMenu> 
      {/* 判断当前节点是否有页面信息内容 */}
      <div v-if=" item.node_id in data_page">
      123</div>
    </li>
  </ul>
</template>
<script>
export default {
  name: "treeMenu",
  props: {
    list:Array,
    data_page:Array
  },
  data() {
    return {
      page_in_or_not:false,
      data_page: this.data_page,
      node: this.item
    };
  },
</script>
```

视图文件

```js
// 递归传值
<treeMenu v-bind:list="item['children']" :data_page="data_page" ></treeMenu>
```

 10-27

发现同步加载问题导致页面信息渲染概率性失败，（已修复 20:45）
后端改回分类数据和页面数据一起传输
设置超链接样式

 10-29

更新离线数据内容
新建编辑页面，配置路由(组件和视图文件名称避免一致，views/.=>index.js)
注释废弃代码
从前端传输文件到flask失败，改为使用iframe调用flask渲染的文件传输网页
设置编辑页面样式
新增分数据源模式显示表单功能
导入及初始化组件完成
新增操作结果提示(通过query参数)

 10-30

修复目录链接样式，改为css引入
新增https
修改组件接口(未完成22:14)

>vue代理配置https参数参考文献:[Vue 修改默认访问地址 - 1764564459 - 博客园](https://www.cnblogs.com/study10000/p/15923158.html)

 10-31

修改组件接口完成
重置接口名称(vue.config前端调用接口与flask框架渲染的页面接口分开代理)
调整编辑视图操作提示标签的位置
新增登录页面
设置密码有效值验证 合法性+复杂性+长度
添加密码提示

 11-5

新增AES加密
>降低服务器负担，使用对称加密算法
通过图片验证码+时间+随机字符补全长度生成密钥
*c/s通讯安全性参考:[【面试必备】https到底是如何防篡改的？ - 知乎](https://zhuanlan.zhihu.com/p/269827927)*
*JS AES加密参考: 英文文档 [crypto-js - npm](https://www.npmjs.com/package/crypto-js)*
*中译 [前端加密JS库--CryptoJS 使用指南 - Tommy_marc - 博客园](https://www.cnblogs.com/tommymarc/p/13187435.html)*

使用axios发起post请求，用data格式封装信息

 11-6

新增验证码接收功能，显示在登录页

 11-7

新增客户端临时身份ID生成功能，并将ID发送到后台获取验证码
新增ID存储至session会话
新增验证码请求失败提示

 11-10

偏移量生成改为更改为SHA256
添加用户登录功能
填写检查从监听属性更改为计算属性

 11-11

用户口令编码添加sha256加密环节，以保护用户口令明文
封装信息加密环节

 11-12

调整用户登入界面表单样式
将验证码img标签移入用户登入功能组件

 11-13,11-14

调整登入功能组件样式,改为grid布局
登入组件原条件渲染命令v-show改为v-if

 11-15

完善刷新验证码功能
完善vueX管理用户状态功能
修复bug:验证码含大小写(一致转小写)

 11-16

新增自动登录功能
完善用户状态系统，更新用户身份令牌token机制

 11-17

添加用户grade级别信息接收

 11-22

新增用户密码修改初版功能

 11-23

完善用户密码修改功能，将功能代码移动至单独的vue组件内
完善用户信息输出功能，修复bug:获取用户级别信息

 11-25

登出功能重置vueX-store与vueX-store初始化内容同步

 11-30

新增邮箱绑定功能

 12-2

调整post请求携带负载中的"用户"键名，统一为account

 12-3

服务器数据文件传输界面从Iframe标签改为vue组件

 12-25

数据库忘了备份，靠代码的sql语句还原了大致结构，但由于缺失细节的配置信息目前无法远程传输文件到服务器；
由于部署环境变更，原环境的证书已失效；
最近完成的是初始化调试，还需检测本地数据库导入信息功能；
预计词条编辑使用SQL形式存储，剩余时间仅能做到简介的编辑

 12-26

新增词条解释页面功能
新增编辑词条介绍功能
修复文件上传服务器功能(表单内容未添加用户信息导致被拦截)
修复密码更改时的验证码更换
词条解释的编辑改为多行文本框

***

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).