全栈的自我修养: 环境搭建

Not all those who wander are lost.

彷徨者并非都迷失方向。

Table of Contents

@

当你看到这篇文章的时候,暂且认为你对如何做一个网站有了兴趣.

前言

本系列文章将从一个完整的项目是如何开发的过程进行编写,期间会涉及前端、后端和一些运维的知识。

本篇题为 全栈的自我修养 将通过一个项目整合(一前端项目对应三个后端项目),完成一个简单的DEMO

其中前端项目使用 Vue.js,这个项目将会用到vue,vuex,vue-route,axios,elementUI

后端项目使用为 3 个项目,其中涉及Spring Boot, Mybaits, Flask

中间会穿插一些运维的知识如常用linux命令, Jenkins

也会介绍一些工具的使用

计划分为以下几个项目:

  1. epimetheus-frontend 面向用户的PC前端项目
  2. epimetheus-management-frontend 面向运营人员的内部管理系统前端项目
  3. epimetheus-miniapp-frontend 小程序前端项目
  4. epimetheus-backend 对应后端
  5. epimetheus-management-backend 对应后端
  6. epimetheus-miniapp-backend 对应后端

环境准备

作为第一篇,这里主要介绍Vue环境的准备工作.

nodejs

根据实际情况下载对应版本即可

官网地址:https://nodejs.org/zh-cn/download/

安装完成后,在控制台中输入:node -v 即可得知安装的node版本,使用 npm -v 查看 npm 版本

node -v
v14.4.0
npm -v
6.14.5

vue-cli

如果上面已经验证正确安装了 nodenpm, 则使用 npm install -g vue-cli 完成 vue-cli 的安装

创建 Vue 项目

给项目起名字一直是困扰我的第一个难题,本次将项目暂命名为 epimetheus-frontend

使用 vue-cli 命令生成项目,命令格式为:vue init webpack Vue-Project, 这里为 vue init webpack epimetheus-frontend,

  1. 首先找个存在代码的文件夹,这里先创建一个 epimetheus 文件夹
  2. 进入 epimetheus 文件夹
  3. 执行 vue init webpack epimetheus-frontend

根据提示填写项目信息:


? Project name epimetheus-frontend
? Project description A Vue.js project
? Author yunan.zhang <zhangyunan@91jinrong.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) yarn

注意上面选择了 yarn 而不是 npm, 这里对于使用 npm 还是 yarn, 并没有要求,两个的功能都能使用,只是命令略有不同而已

yarn和npm 命令 对照表

npm yarn
npm install yarn install
(N/A) yarn install --flat
(N/A) yarn install --har
(N/A) yarn install --no-lockfile
(N/A) yarn install --pure-lockfile
npm install [package] (N/A)
npm install --save [package] yarn add [package]
npm install --save-dev [package] yarn add [package] [--dev/-D]
(N/A) yarn add [package] [--peer/-P]
npm install --save-optional [package] yarn add [package] [--optional/-O]
npm install --save-exact [package] yarn add [package] [--exact/-E]
(N/A) yarn add [package] [--tilde/-T]
npm install --global [package] yarn global add [package]
npm rebuild yarn install --force
npm uninstall [package] (N/A)
npm uninstall --save [package] yarn remove [package]
npm uninstall --save-dev [package] yarn remove [package]
npm uninstall --save-optional [package] yarn remove [package]
npm cache clean yarn cache clean
rm -rf node_modules && npm install yarn upgrade

安装过程可能有点慢,安装完成后,如下

# Project initialization finished!
# ======================== To get started: cd epimetheus-frontend
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack

这时,我们可以进入 epimetheus-frontend, 并在控制台运行 npm run dev,即可开始运行我们的项目

epimetheus$ cd epimetheus-frontend
epimetheus/epimetheus-frontend$ npm run dev > epimetheus-frontend@1.0.0 dev /Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 13% building modules 29/31 modules 2 active ...theus/epimetheus-frontend/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting DONE Compiled successfully in 2886ms 下午1:49:57 I Your application is running here: http://localhost:8080

从控制台信息可以看出,访问路径为:http://localhost:8080

这样准备工作基本就完成了

项目结构

这里使用 VSCode 进行开发,你也可以使用 Webstorm, 两个都可以,在使用VSCode 的时候,可以直接在终端使用 code 命令在VSCode打开执行文件或者目录,

例如:

epimetheus/epimetheus-frontend$  code .

则会将当前文件夹 epimetheus/epimetheus-frontendVSCode 中打开,

如何你安装 VSCode 后,使用 code 命令时,提示 not fund, 可以通过 查看 -> 命令面板 输入 code 进行安装

这里使用了 VSCode,打开项目后如图:

├── build/                      # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file

其中,我们主要修改 src 下文件,上面提到项目访问端口为:8080, 为了防止与其他项目造成冲突,这里将端口改为:7000, 具体配置在 config/index.js 文件中

使用 elementUI

这里使用了

官网:http://element-cn.eleme.io/#/zh-CN/component/installation

这里我们进入刚才的项目目录:并执行 yarn add element-ui

epimetheus/epimetheus-frontend$ yarn add element-ui
yarn add v1.15.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages... success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
└─ element-ui@2.13.2
info All dependencies
├─ async-validator@1.8.5
├─ deepmerge@1.5.2
├─ element-ui@2.13.2
├─ normalize-wheel@1.0.1
├─ resize-observer-polyfill@1.5.1
└─ throttle-debounce@1.1.0
Done in 8.36s.

配置

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(ElementUI); new Vue({
el: '#app',
render: h => h(App)
});

配置完成后的 main.js 文件为:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router' Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
components: { App },
template: '<App/>'
})

配置 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

也就是通过 Vuex ,各个组件可以实时的共享状态

官网:https://vuex.vuejs.org/zh-cn/intro.html

安装

首先我们先安装它 yarn add vuex

epimetheus/epimetheus-frontend$ yarn add vuex
yarn add v1.15.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages... success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vuex@3.4.0
info All dependencies
└─ vuex@3.4.0
Done in 5.33s.

配置

首先在 src 下创建 store 文件夹并在其下创建 store.js 文件

src/store/store.js, 同时创建 src/assets/util/cookie.js

src/assets/utils/cookie.js 文件内容

该文件主要用于操作cookie

let cookie = {
setCookie (cname, value, expiredays) {
let exdate = new Date()
exdate.setTime(exdate.getTime() + expiredays)
exdate.setDate(exdate.getDate() + expiredays) 
document.cookie = cname + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
},
getCookie (name) {
let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
let arr = document.cookie.match(reg)
if (arr) {
return (arr[2])
} else {
return null
}
},
delCookie (name) {
let exp = new Date()
exp.setTime(exp.getTime() - 1)
let cval = cookie.getCookie(name)
if (cval != null) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
}
}
} export default cookie

src/store/store.js 内容

这里定义了 userInfo 用来保存当前的用户信息,包含一个 nametoken

import Vue from 'vue'
import Vuex from 'vuex'
import cookie from '../assets/util/cookie' Vue.use(Vuex) const userInfo = {
name: cookie.getCookie('name') || '',
token: cookie.getCookie('token') || ''
} const store = new Vuex.Store({
state: {
userInfo: userInfo
},
mutations: {
setUserInfo (state) {
state.userInfo = {
name: cookie.getCookie('name'),
token: cookie.getCookie('token'),
}
}
}
}) export default store

main.js 添加Vuex配置,

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store/store' Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App),
components: { App },
template: '<App/>'
})

配置 axios

Promise based HTTP client for the browser and node.js

axios 是一个基于 Promise 的 http client, 通过他,我们向后端进行数据交互,如果你不喜欢它,可以使用jqueryajax 代替.

我们来安装一下

epimetheus/epimetheus-frontend$ yarn add axios
yarn add v1.15.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ axios@0.19.2
info All dependencies
├─ axios@0.19.2
└─ follow-redirects@1.5.10
Done in 4.39s

修改 main.js 文件

加入

import './axios_config/'
import Axios from 'axios'
Vue.prototype.$http = Axios

github

https://github.com/zhangyunan1994/epimetheus-frontend

参考

全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)的更多相关文章

  1. 运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法

    运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法 问题一: SyntaxError: missing ) after argument list in .....\vie ...

  2. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=&gt;nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  3. springboot 前后端分离开发 从零到整(一、环境的搭建)

    第一次写文章,有什么错误地方请大家指正,也请大家见谅. 这次为大家分享我做毕业设计的一个过程,之前没有接触过springboot,一直做的都是Javaweb和前端,做了几个前后端分离的项目.现在听说s ...

  4. 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)

    原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...

  5. 前后端分离 开发环境通过CORS实现跨域联调

    通过JSONP实现跨域已是老生常谈,JSONP跨域限制多,最近了解了一下CORS. 参考: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acce ...

  6. Vue + Spring Boot从零开始搭建个人网站(一) 之 项目前端Vue.js环境搭建

    前言: 最近在考虑搭建个人网站,想了想决定采用前后端分离模式 前端使用Vue,负责接收数据 后端使用Spring Boot,负责提供前端需要的API 就这样开启了我边学习边实践之旅 Vue环境搭建步骤 ...

  7. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  8. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

  9. (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...

  10. 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

随机推荐

  1. java进阶之反射:反射基础之如何获取一个类以及如何获取这个类的所有属性和方法(2)

    当我们知道一个类的对象,或者知道一个类的路径,或者指导这个类的名称的时候我们可以获取到这个类的类对象 当我们仅仅知道一个类的类对象的时候我们依然无法操作这个类,因为我们不知道这个类的属性,类的方法.那 ...

  2. day 2 系统分区 扩展.md

    1.分区类型 主分区: 最多只能有四个. 扩展分区: 最多只能有一个. 主分区加扩展分区最多有4个. 不能写入数据,只能包含逻辑分区. 逻辑分区 2.格式化 格式化(高级格式化)又称逻辑格式化,它是指 ...

  3. POJ3057 Evacuation(二分图最大匹配)

    人作X部:把门按时间拆点,作Y部:如果某人能在某个时间到达某门则连边.就是个二分图最大匹配. 时间可以二分枚举,或者直接从1枚举时间然后加新边在原来的基础上进行增广. 谨记:时间是个不可忽视的维度. ...

  4. js之arguments对象的使用

  5. So easy Webservice 8.spring整合CXF 发布WS

    1.添加jar包(cxf的jar包中包含了spring的jar包),添加spring配置文件 2.web.xml中配置CXFServlet,过滤WS服务的地址 <!-- 配置CXFServlet ...

  6. LVS 之 DR 2

    http://www.cnblogs.com/kgdxpr/archive/2013/09/09/3309776.html http://lyp0909.blog.51cto.com/508999/5 ...

  7. MarkDown教程

    MarkDown笔记 在线编辑器其他教程 [1.标题] 标题1 标题1=== 标题2 标题2--- 标题3 1 2 3 4 5 6 7 7 #1 ##2 ###3 ####4 #####5 ##### ...

  8. TEdit,TMemo背景透明

    The component below works perfectly, except for the following problem: 1) Saves the component below ...

  9. .NET(C#):在数组成员上加入XmlElement特性

    原文 www.cnblogs.com/mgen/archive/2011/12/04/2276131.html 当对如下类进行XML序列化时: publicclassa { }; } 结果会是: &l ...

  10. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...