⭐ 作者简介:码上言
⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程
项目部署视频
https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b
文章目录
前言
这次拖了一个多月才更新,最近自己发生了很多的事情,有时间和大家一起聊聊,所以一直没来得及更新,这次终于能静下心来写文章了,在这期间我还谋划了一个大的规划,那就是整理Java。我将系统的进行学习,学习的同时我将会写基础的学习文章,估计要持续四个月左右吧,从Java基础到JavaWeb然后到Spring、SpringBoot、MySQL、redis、MQ、SpringCloud、Linux等等,到时候看情况再说。
这个小项目下面的教程我会带着前端一起写,后端的东西也就这些了,具体太复杂的功能这个项目先不写了,等系统的学完之后,我再重构一个项目,将所有的知识整合到一起,大概要到下半年了,不能许诺太长时间哈!现在我们先把剩下的东西写完,最起码也是我们一点一点的敲出来的,做出来也有成就感,当个毕设或者小作品的也还行。
最后关于基础的知识教程欢迎大家给我留言,以什么样的方式写,什么样的难度或者大家有自己的想法欢迎大家留言或者私信我!有想法就要去想,去做,万一实现了呢!
一、前端搭建
好啦,接下来我们进行前端项目的搭建,我选择的是用Vue来搭建后台,我们的重点是要将整个项目完成,有些不太懂前端,所以我这里先使用的简单的现成的框架进行二次开发,能最大限度的减少前端的开发,想具体学习Vue的大家以后可以自己学习或者可以和我一起来学。我这里隆重的给大家介绍一个后台管理的模板: vue-element-admin
官方网址:https://panjiachen.github.io/vue-element-admin-site/zh/guide/
根据官方的介绍,vue-element-admin是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。
建议
本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
Others: awesome-project
我使用的是基础的模板: vue-admin-template
,这个对我们目前的项目来说足够了,想了解的大家可以自行看一看前端的模板就用这个了,下面我们将它下载到本地并且在本地跑起来。
1、下载前端模板
首先我们是使用的基础版
下载地址:https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0这里我们需要选择一下版本,我用的是3.11.0
的版本。上面的图是我们刚进来的页面,这个是新的版本,我们点击那个master
,找到tag/3.11.0
,然后选择这个分支选择好分支,然后点击右上角的Code,进行下载。也可以克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
如果下载不下来,可以从以下网盘中下载:
链接:https://pan.baidu.com/s/16KmkwFgisBrU408LsPNPCQ
提取码:bc7n
2、项目运行
我们现在已经有前端项目了,但是现在如何运行项目和编写vue代码呢,这时候就就要借助开发工具进行编写,这里我推荐的是Vs Code开发工具,相信大家也都听说过或者用过,具体的安装什么的我不再具体的讲解,版本都差不多,我建议不要汉化,要使用英文,顺便可以学习学习英语。地址:http://vscode.bianjiqi.net/下载安装完之后,我们将下载的Vs Code打开,然后点击左上角的File,将项目导入进来。点击左上角的文件,我这个好像是中文版的,两个都可以的。
打开项目:每个项目的具体的功能,根据官方提供的目录机构,这个应该是完整版的,我们使用的是基础版的,基本上相差不大,都包含了基础版本的功能。
├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json
在我们了解目录结构后,下面我们要安装依赖,这时候我们就需要安装Node.js,可能对于新手来说node没有安装过,我这里提供下载的地址。
安装的教程我在网上找了一篇,我在这里不过多的介绍了,这一篇的篇幅会很长,安装软件我就省掉了。
安装教程地址:https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html
待我们安装完成后,我们打开VS Code软件,然后Ctrl+j打开控制终端。
然后输入:
# 安装依赖 npm install
等待安装完成,有可能会失败,或者下载慢,可用以下的命令
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org
如果一直安装失败,可以给我留言,我发给你我下载好的,相信大多数都是可以的。
依赖安装完成后,我们开始启动项目
# 本地开发 启动项目 npm run dev
输入完成,回车等待项目启动,出现以下情况项目则启动完成。浏览器自动弹出并访问http://localhost:9528,这个就是我们访问的地址。
在浏览器访问我们的前端地址,看页面会出现登录的页面,是不是很简单,我们的前端项目到这里搭建完成了,接下来我们对前端的项目进行改造。
我们先点一下登录,看到以下页面,是不是很有感觉和成就感。哈哈