前言

作为一个后端菜鸟,需要了解一点前段

,这是我一段时间的踩坑历史....

环境安装(必不可少的运行时环境 )

  1. 安装 node js https://nodejs.org/en/
  2. 安装 git https://git-scm.com/
  3. 可选项: 国内镜像 (打开gitbush) 输入: npm install -g cnpm --registry=https://registry.npm.taobao.org

基本环境安装完后 是不是想找个项目实施看看.

尝试入手Demo案例

halo blog https://halo.run/guide/

快速开始

下载最新的 Halo 安装包 Java(需要Java8+环境)

curl -L https://github.com/halo-dev/halo/releases/download/v1.0.3/halo-1.0.3.jar --output halo-latest.jar

或者

wget https://github.com/halo-dev/halo/releases/download/v1.0.3/halo-1.0.3.jar -O halo-latest.jar

启动 Halo

nohup java -jar halo-latest.jar >/dev/null 2>&1&

以上Java后台启动完成 , Springboot2.X Application 有需求设置端口可用 --server.port=80

后台(前段)-需提前安装 node 环境

命令: (如果速度过慢...可选用 cnpm)

  1. git clone https://github.com/halo-dev/halo-admin
  2. npm install
  3. npm run serve

等待前段启动完成 打开8080端口 查看

UTOOLS1564545615623.png

// 安装依赖

npm install

// 启动服务

npm run serve

// 打包(可选)

npm run build

结束:

回顾一下我们做了什么

先安装了环境

  1. 安装环境
  2. 下载springboot项目
  3. 下载前段项目
  4. 启动前段项目

部署篇

不希望前段一直启动 需要打包前段页面

运行命令: npm run builddist 目录

然后将dist 放置 web 服务器容器中 如 Nginx Apache Springboot -> static 目录

还有一点就是关于 路由的问题, 路由有2种

  1. HashHistory
  2. BrowserHistory

如果是 BrowserHistory 简单描述 一个url中有# 一个没有 , 因为是服务的关系 所以刷新不会丢失页面,如果打包后放置Nginx 刷新发现get404 可参照: https://pro.ant.design/docs/deploy-cn

在Nginx 中添加

// 用于配合 browserHistory使用

try_files $uri $uri/ /index.html;

如果出现跨域问题 参照我上一篇博文 https://www.runjava.cn/archives/1563443822128

吐槽篇

讲实话 我用过最烂的依赖工具就是前端的 node modules

每个项目重新下载一次node 依赖在当前项目中 (还不能改 如果项目中有其他成员都是从中央库下载)

所以不存在可修改的问题 也就剩下了复用性 感觉没啥复用性 而且删除node modules 时间需要可能长达10分钟

最近在学 Ant Design of React 感觉还挺好 还尝试了一下 Vue 版本的 脚手架 暂时挺好用哈哈

有时间出2篇来说说 如何对当前项目做适配

Vue: https://preview.pro.loacg.com/dashboard/workplace

React: https://preview.pro.ant.design/

UTOOLS1564545176794.png