從設計到前端，從前端到服務端

時間 2019-11-13

標籤設計前端服務简体版

原文原文鏈接

這幾天試着將一個網站開發的全鏈路走了一遍，從Axure設計，使用webpack和Vue作前端開發，用Spring Boot做爲後臺，感受已經從java程序員變成了全能程序員！css

Axure是產品經理和前端使用的用來設計界面的工具，它能夠直接生成html和相關的css，js，png等資源。html

前端開發若是能夠複用Axure的生成文件，能夠節省很多時間。前端框架使用Vue，因此不須要使用js等文件，在Axure設計的時候，只關注界面設計，而不用添加事件響應等動態內容。使用Vue Router來作頁面路由，因此Axure設計時也不要使用模板。前端

一設計頁面vue

打開Axure，新建工程，建立三張頁面以下（每一個頁面在後期Vue項目中對應一個component）：java

對每張頁面設計內容，Home：jquery

Generator：程序員

頁面設計只要託託拽拽就能完成，input可經過屬性Type修改來作限制，設計完成以後能夠經過Publish->Generate HTML Files...產生後期要用的html。web

產生以後的目錄結構如：vue-cli

其中index.html, start.html, start_c_1.html, start_g_0.html都是Axure使用的中間文件，真正用到的是home.html, register.html, generator.html和包含資源的文件夾。

二建立Vue工程

1) 安裝Node.js

2) 安裝cnpm： npm install -g cnpm --registry=http://registry.npm.taobao.org

3) 全局安裝webpack：cnpm install webpack -g

4) 全局安裝vue-cli: cnpm install -g vue-cli

5) 用webpack模板建立一個vue項目：vue init webpack my-project

6) 安裝項目依賴：cd my-project / cnpm install

7) 啓動項目，用IntelliJ IDEA打開my-project文件夾

8) 編譯：在my-project中，npm run build

編譯完之後會在dist目錄下生成index.html和static文件夾：

三將Axure的生成文件和Vue項目結合

1）能夠將Axure文件生成的目標文件設置爲src，將home.html, register.html, generator.html分別包裝成三個vue。

首先處理主頁home.html, 將html文件中<body>中的內容拷貝到對應App.vue文件的<template>中（注意保留第二層id爲app的div）

拷貝過程當中注意資源文件的引用路徑

將file/home/data中的styles.css的內容拷貝到App.vue的<style>中

html額外應用的三個css文件須要在main.js中import進來：

import './data/styles.css'
import './resources/css/jquery-ui-themes.css'
import './resources/css/axure_rp_page.css'

在src/components中建立Register.vue和Generator.vue，按照處理home.html的方法，將register.html和generator.html中的內容拷貝到vue中。

2）頁面路由設置

在src中建立router.config.js, 內容以下：

import Register from './components/Register.vue'
import Generator from './components/Generator.vue'

export default{
  routes: [
    {path: '/register', component: Register},
    {path: '/generator', component: Generator}
  ]
}

在main.js中添加路由信息：

在App.vue <template>的合適位置添加

<router-view></router-view>

<router-link to="/register">註冊頁面</router-link>

<router-link to="/generator">註冊碼生成</router-link>

四編譯前端

修改config/index.js

將assetsPublicPath改成./（編譯以後index.html引用資源的相對路徑）

將devtool改成eval-source-map（方便打包以後調試）

使用npm run build打包。

五將打包的前端代碼上傳服務端

可將static文件夾直接拷貝到resources下，將index.html拷貝到resources/templates下，在Controller中將index.html包裝成一個view。

啓動服務端！！

參考：

https://www.cnblogs.com/alantao/p/8477907.html

https://blog.csdn.net/zilaike/article/details/82665922

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。