# spring-boot

**Repository Path**: shi-jiajun111/spring-boot

## Basic Information

- **Project Name**: spring-boot
- **Description**: 校企实训开源分享
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-06-30
- **Last Updated**: 2023-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#测试Gitee文件传输
#测试2
# Springboot+vue前后端分离

标签（空格分隔）： 学习

---
##基础配置
1. [下载安装nodejs，vue的环境][1]
```python
#cmd打开命令行

#查看node，npm是否成功下载
node -v
npm -v

#配置vue的命令行工具
npm install -g @vue/cli

#创建新项目
vue create 项目名称

#用idea打开后需要在tool中创建npm，以package.json为内容的serve脚本，然后运行即可

#修改为--open可以自动打开文件
"serve": "vue-cli-service serve --open"

#下载element-plus
```
2.github快速访问[跟这里][2]
将获取的域名填入到hosts文件中，需要用记事本打开管理员权限才能修改
[git上传文件][3]

3.[在阿里镜像源中下载git][4]实现git上传功能

##语法
1. `export default`是用来导出常量、函数、文件、模块的。是ES6语言。`
2. `sessionStorage`前端互传数据
```vue
//将表单中的数据传入到前端缓存中，方便其他页面调用
sessionStorage.setItem("user",JSON.stringify(res.data))
//另一个前端进行接收
data(){
    return{
      username:sessionStorage.getItem("user").replace(/\"/g, "")
    }
  }


```

##目录结构
- src
 -  components:`vue组件包,可以将一些组件打包放入其中` 
  -- Aside.vue:用来存放侧边导航栏（管理员）
  -- Header.vue:用来存放上边导航栏
  -- Aside_user.vue:用来存放侧边导航栏（用户）
 -  router ：路由配置
  -- index.js中配置了路由，将路径和页面做了映射
 - store
  -- index.js页面跳转存储的变量
 - views：存储前端页面中除了导航栏的body界面
  -- user_main:用户首页（用户）
  -- admin_main:管理员首页
  -- admin.vue:管理员管理
  -- user.vue：用户管理
  -- store.vue:仓库管理
  -- obj_classify.vue:物品分类管理
  -- object.vue:物品管理
  -- record.vue:记录管理
  -- obj_select.vue:物品查询（用户）
  -- Login.vue:登录界面
  -- Register.vue:注册界面
 - layout：存储用户登录主界面和管理员登录主界面
  --layout.vue：存储用户登录界面
  --layout_admin.vue:存储管理员登录页面
- package.json：定义项目依赖文件


##基本步骤
###前端基本工作
####1. 在component目录下定义Header.vue头，Aside.vue侧边栏组件，router中设计路由基本路径
- ---
- Header头中设计标题和用户名下拉框可以退出系统和展示详细信息，在展示详细信息中涉及到新注册用户和老用户，我们允许

>  新注册用户在form表单中填写除了用户名和密码以外的其他信息，并且更新保存到数据库中；(涉及后端)

> 老用户将所有信息显示并且可以进行修改;（涉及后端）

> 下拉框显示登录的用户的用户名和头像（分辨为用户和管理员）


- Aside.vue中需要定义菜单栏
```vue
<el-menu-item @click="c1" index="admin_main" :style="active1" >首页</el-menu-item>
```
> index属性将与router文件下的index.js中的路由配置中的地址相同，从而使每个el-menu—item可以跳转到不同的body界面

> 对不同案件进行鼠标事件处理，使其可以在鼠标放在按钮上和离开按钮展示不同形态，同时在点击以后保持形态不变

- router的index.js中设计路由
> 
1. 将Login.vue界面设计为系统默认初始路径，同时为Register.vue设计注册路径由注册按钮触发
2. 设计admin_login为管理员成功登录路径，显示的是layout.vue,并且重定向到layout的子目录admin_main显示管理员主页，在admin_login下设计嵌套路由（子目录），将管理员所有body页面都注册到其中
3. 在user_login下进行相应的设置




####2. 设计登录界面（Login.vue），注册界面（Register.vue），用户和管理员主界面框架(layout.vue)
- Login.vue中定义了登录背景，
> 
1. 设计表单包含了input输入框需要用户和管理员填写username和password，和单选框分类用户和管理员，以此鉴别跳转到不同的界面；
2. 同时将表单通过request.post函数上传到后端数据库，设计判定规则保证用户名和密码是否和数据库中保存的相同。
` request.post("/api/user/login",this.form).then(res =>`
3. 若登录成功则跳转到（用户/管理员）主页
` this.$router.push("/user_login")`

- Register.vue设置了注册背景和账号密码输入框，注册后可以保存到数据库中，同时跳转到登录界面

- layout.vue中将写好的header和Aside组件放入，同时放入body（view下面的界面）组件，使其成为一个完整界面，注意**管理员和用户仅仅是Aside组件不同**

####3.设计body界面
- body界面总共分为
**管理员页面下**：
admin_main.vue,
admin.vue,
user.vue,
store.vue,
obj_classify.vue,
object.vue,
record.vue
**用户页面下**：
user_main.vue,

- body界面设计包含了
    > 新增按钮：可以弹出一个表单对列表新增，将其传入到后端数据库中
    
    > 查询：从数据库中查询到相关信息，每一个表需要的查询主键不同

    > 编辑：对表中每一个数据进行修改，也需要链接后端数据库
    
    > 删除：点击按钮触发删除事件删除后端数据库


  [1]: https://blog.csdn.net/weixin_44893902/article/details/121788104?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168713508916782427411859%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168713508916782427411859&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-121788104-null-null.142%5Ev88%5Einsert_down28v1,239%5Ev2%5Einsert_chatgpt&utm_term=nodejs%E5%AE%89%E8%A3%85%E5%8F%8A%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE&spm=1018.2226.3001.4187
  [2]: https://blog.csdn.net/qq_34246965/article/details/131251891?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168799919616782427487789%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168799919616782427487789&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-131251891-null-null.142%5Ev88%5Econtrol_2,239%5Ev2%5Einsert_chatgpt&utm_term=github%E5%AE%98%E7%BD%91%E8%BF%9B%E4%B8%8D%E5%8E%BB&spm=1018.2226.3001.4187
  [3]: https://blog.csdn.net/weixin_45184627/article/details/107256199
  [4]: https://registry.npmmirror.com/binary.html?path=git-for-windows/v2.41.0.windows.1/