实验管理系统springboot+vue+elementui项⽬开发
实验管理系统
某学院实验⽼师长期采⽤⼈⼯的形式完成药品试剂的⼊库、查询、出库的流程。但这种⽅式存在诸多问题和不便：
1. 在仓库运⾏流程中效率不⾼，容易出错。
2. 管理⼈员不能⽅便的了解每种物品的状态。
3. 数据量越来越⼤，难以维护。
因此，为了解决以上问题，提⾼办公效率，提⾼⼈⼒物⼒的利⽤率，对仓库⼯作进⾏信息化，规范化管理，结合使⽤单位的需求，开发出⼀套适合使⽤单位进⾏管理使⽤的系统。
2021.3.25~2021.4.1
本项⽬采⽤前后端分离开发
⼀、前端开发的环境配置
1.1 安装node.js
⾸先我们上node.js官⽹()，下载最新的长期版本，直接运⾏安装完成之后，我们就已经具备了node和npm的环境了。
安装完成之后可以window+r在控制台检查版本信息以及是否安装成功：
1.2 安装vue的环境
window+r打开控制台分别输⼊以下两条语句，安装淘宝npm，cnpm是为了提⾼我们安装依赖的速度！！
# 安装淘宝npm
npm install -g cnpm --registry=registry.
# vue-cli 安装依赖包
cnpm install --g vue-cli
1.3 ⽤vue ui新建项⽬
1、⾸先在我们要保存的项⽬⽂件夹⾥右键点击PowerShell窗⼝
vue element admin如果没有PowerShell窗⼝，则shift+右键即可
2、输⼊vue ui，如果提⽰⽆法加载⽂件，则可能是vue版本太低的原因，可以去控制台输⼊vue -V检查版本，vue版本是2.X的输⼊vue ui 是没有反应的。
解决⽅法：1、安装最新的脚⼿架，在控制台输⼊
cnpm i -g @vue/cli
解决⽅法2：如果上述⽅法不可⾏，先将原来的vue卸载掉，在控制台输⼊
npm uninstall -g vue-cli
然后输⼊以下命令⾏，进⾏⾼版本的安装：
npm install -g @vue/cli
如果上述⽅法还不⾏，那就需要：
1. 以管理员⾝份运⾏PowerShell（点开Win10开始菜单，再点开所有应⽤，再点开Windows系统，到并右键单击Windows
Powershell，右键菜单中点击选择“以管理员⾝份运⾏”就可以了！）
2. 执⾏：get-ExecutionPolicy，如果显⽰Restricted，表⽰状态是禁⽌的
3. 执⾏：set-ExecutionPolicy RemoteSigned
4. 选择Y
ok，上述三个解决⽅法总有⼀个适合你！！
1.4 编译器的选择（这边我们先默认选择idea）
选择idea的话需要先安装插件
点击file-settings-plungins，输⼊vue，安装vue.js。
1.5 安装element-ui
接下来我们引⼊element-ui组件（）
那么，idea怎么安装这个组件呢？
1. 点击idea左下⾓的Terminal，
2. 输⼊cnpm install element-ui --save，这⾥可能会遇到⼀个⼩问题，如果显⽰cnpm不是内部命令，但是在控制台输⼊cnpm -v有显
⽰信息，那么就是idea默认的cmd配置问题
1. 解决⽅法
1. file-settings-Tools-Terminal更改shellpath地址为本地的cmd存储位置即可。
2. 记住更改完⼀定要重启idea，重启idea，重启idea！！
安装完成后，我们打开项⽬src⽬录下的main.js，引⼊element-ui依赖。
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
在全局写⼊下⾯代码就可以使⽤element-ui的组件了
Vue.use(Element)
在idea按如下图⽚配置，即可通过按钮直接运⾏⽽不需要通过命令⾏npm run serve运⾏了
1.6 安装axios
我们来安装axios（），axios是⼀个基于 promise 的 HTTP 库，这样我们进⾏前后端对接的时候，使⽤这个⼯具可以提⾼我们的开发效率。
安装命令
cnpm install axios --save
main.js中全局引⼊axios
import axios from 'axios'
Vue.prototype.$axios = axios
⼆、项⽬托管的选择
⽬前⽤得⽐较多的就是git（分布式版本控制系统的代表）和svn（集中式版本控制系统的代表）
2.1 那么，两者有什么区别呢
SVN是集中式版本控制系统，版本库是集中放在中央服务器的，⽽⼯作的时候，⽤的都是⾃⼰的电脑，所以⾸先要从中央服务器得到最新的版本，然后⼯作，完成⼯作后，需要把⾃⼰做完的活推送到中央服务器。集中式版本控制系统是必须联⽹才能⼯作，对⽹络带宽要求较⾼。
Git是分布式版本控制系统，没有中央服务器，每个⼈的电脑就是⼀个完整的版本库，⼯作的时候不需要联⽹了，因为版本都在⾃⼰电脑上。协同的⽅法是这样的：⽐如说⾃⼰在电脑上改了⽂件A，其他⼈也在电脑上改了⽂件A，这时，你们俩之间只需把各⾃的修改推送给对⽅，就可以互相看到对⽅的修改了。Git可以直接看到更新了哪些代码和⽂件！
Git是⽬前世界上最先进的分布式版本控制系统。
⽏庸置疑，我们选择的是Git！！
2.2 git的安装和环境配置
详情可以看我这篇⽂章
2.3 git的基本⽤法
具体可以看码云官⽹：
初学者推荐廖雪峰的⽂档：
2.4 简单说下git分⽀
⾸先在实际开发中，⼀个仓库（通常只放⼀个项⽬）主要存放两条分⽀：master和develop。master分⽀是创建git仓库时⾃动⽣成
的，develop分⽀需要我们⾃⼰创建。
master分⽀：最稳定的分⽀，这个分⽀代表项⽬处于可发布的状态
develop分⽀：作为开发的分⽀，平⾏于master
feature分⽀：也就是功能分⽀，是为了解决某⼀个问题⽽设⽴的，当这个问题解决后，代码会合并回主分⽀develop后删除。（必须从develop分⽀创建）
2.5 github和gitee的选择
因为github是国外的，国内访问会很慢，所以推荐还是使⽤码云gitee！！
2.6 ⽣成SSH公钥
在码云上创建ssh密钥，点击⽤户头像-设置-ssh密钥，可以看码云官⽹说明，很详细了，
2.7 把项⽬托管到码云上
然后新建仓库，新建完仓库会有以下页⾯出现
1、⾸先执⾏划线的两个句⼦，如果显⽰git不是内部命令就是没有安装git或者没有配置git环境变量，具体可以参考下⾯这篇⽂章
2、操作本地仓库，在⾃⼰的项⽬路径下，shift+右键打开PowerShell窗⼝或者右键 git bash输⼊
1. git status（如果提⽰：fatal: not a git repository (or any of the parent directories): .git），则先输⼊git init，在输⼊git
status
2.  git add . （注意最后有个点，是添加全部⽂件的意思）
3.  git commit -m "add files"
4. 最后再输⼊ git status，如果显⽰On branch master
nothing to commit, working tree clean，即操作正确！！
3、把本地仓库上传到码云中
1. 在本地仓库的PowerShell窗⼝输⼊（把⾃⼰的本地仓库和云端仓库做⼀个关联）
git remote add origin gitee/ykbsmn/vue_lab.git（这句话是上⾯截图的最后⼀块的第⼆句，根据⾃⼰的内容输⼊）2. 在本地仓库的PowerShell窗⼝输⼊（第⼀次需要输⼊码云的账号密码）
3. 弹出窗⼝，输⼊码云的账号密码
4. 最后刷新⾃⼰的码云仓库，显⽰如下即上传成功
三、通过vue-element-admin进⾏⼆次开发
3.1 步骤
3.1.1 基础模板下载地址
或者使⽤git命令克隆
git clone github/PanJiaChen/vue-admin-template
3.1.2 导⼊idea
注意：需要在本地提前安装  和
3.1.3 安装相应依赖
1、在idea安装依赖，在控制台输⼊：
npm install --registry=registry.
2、在idea启动项⽬，控制台输⼊：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。