全棧的自我修養: 001環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue先後端分離開發)

時間  2020-07-10
標籤 自我 修養 環境 搭建 使用 vue spring boot flask django 完成 後端 分離 開發 欄目 Spring 简体版
原文   原文鏈接

<h1> 全棧的自我修養: 環境搭建 </h1>css

Not all those who wander are lost.

彷徨者並不是都迷失方向。

往期文章html

全棧的自我修養: 001環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue先後端分離開發)
全棧的自我修養: 002使用@vue/cli進行vue.js環境搭建
全棧的自我修養: 003Axios 的簡單使用前端

當你看到這篇文章的時候，暫且認爲你對如何作一個網站有了興趣.vue

前言

本系列文章將從一個完整的項目是如何開發的過程進行編寫，期間會涉及前端、後端和一些運維的知識。node

本篇題爲 全棧的自我修養 將經過一個項目整合(一前端項目對應三個後端項目)，完成一個簡單的DEMOjquery

其中前端項目使用 Vue.js,這個項目將會用到vue,vuex,vue-route,axios,elementUI 等linux

後端項目使用爲 3 個項目，其中涉及Spring Boot, Mybaits, Flask 等webpack

中間會穿插一些運維的知識如經常使用linux命令, Jenkins 等ios

也會介紹一些工具的使用git

計劃分爲如下幾個項目:

  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/down...

nodejsdownload.png

安裝完成後，在控制檯中輸入：node -v 便可得知安裝的node版本,使用 npm -v 查看 npm 版本

node -v
v14.4.0
npm -v
6.14.5

vue-cli

若是上面已經驗證正確安裝了 node 和 npm, 則使用 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

image

這樣準備工做基本就完成了

項目結構

這裏使用 VSCode 進行開發，你也可使用 Webstorm, 兩個均可以，在使用VSCode 的時候，能夠直接在終端使用 code 命令在VSCode打開執行文件或者目錄，

例如：

epimetheus/epimetheus-frontend$  code .

則會將當前文件夾 epimetheus/epimetheus-frontend 在 VSCode 中打開，

如何你安裝 VSCode 後，使用 code 命令時，提示 not fund, 能夠經過 查看 -> 命令面板 輸入 code 進行安裝

vscode_install_code.png

這裏使用了 VSCode,打開項目後如圖：

front_project_struts.png

├── 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 文件中

front_project_port.png

使用 elementUI

這裏使用了
官網：http://element-cn.eleme.io/#/...

這裏咱們進入剛纔的項目目錄：並執行 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/...

安裝

首先咱們先安裝它 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 用來保存當前的用戶信息，包含一個 name 和 token

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, 經過他，咱們向後端進行數據交互，若是你不喜歡它，可使用jquery的 ajax 代替.

咱們來安裝一下

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/zhangyunan...

參考

在這裏插入圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程