簡單實現(xiàn)
首先是簡單html的實現(xiàn)的登錄頁面:
<!DOCTYPE html>
<html>
<head>
<title>注冊</title>
</head>
<body>
<form action="/register" method="post">
<fieldset>
<legend>注冊</legend>
<label>用戶名:</label>
<input type="text" name="user" required>
<br>
<label>密碼:</label>
<input type="text" name="pwd" required>
<br>
<label>再次輸入密碼:</label>
<input type="text" name="pwd1" required>
<br>
<input type="submit" value="注冊">
</fieldset>
</form>
</body>
</html>
不加樣式的注冊頁面就這樣,對應(yīng)的登錄頁面也就刪去重復(fù)輸入密碼環(huán)節(jié)而已:
發(fā)現(xiàn)用table可以讓頁面美化一點,所以:
<!DOCTYPE html>
<html>
<head>
<title>注冊</title>
</head>
<body>
<div align="center">
<table>
<tr><td height="80">注冊</td></tr>
</table>
<form action="/register" method="post">
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" name="user" required></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="text" name="pwd" required></td>
</tr>
<tr>
<td>再次輸入密碼:</td>
<td><input type="text" name="pwd1" required></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="gender" value="1"/>
<label for="gender1">男</label>
<input type="radio" name="gender" value="0">
<label for="gender2">女</label>
</td>
</tr>
<tr>
<td>民族:</td>
<td>
<select name="nation">
<option value="1" selected>漢族</option>
<option value="2">壯族</option>
<option value="3">苗族</option>
<option value="4">回族</option>
<option value="5">傣族</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="checkbox" name="confirm">
<label>我同意<a href="/protocol">協(xié)議</a></label>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注冊"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
如上,使用三個table,第一個是用來提示的,最后一個是用來包囊submit的,分開主要是為了讓它可以居中,如果在一個table里面,只會在一個格子里居中而不是整個頁面效果,所以拆開了。另外給添加了性別的選擇框和漢族的下拉列表。
另外的想要注冊按鈕在兩個格子中間,可以使用colspan屬性。
使用vue進行實現(xiàn)
要使用vue,首先要安裝nodejs,因為vue本身算是nodejs的一個框架,官網(wǎng)下載地址:
https://nodejs.org/zh-cn/download
因為有微信發(fā)文的需求,就不使用md語法來內(nèi)嵌鏈接了,直接發(fā)這好復(fù)制吧。下載好node以后,就可以使用npm這個包管理器了,也可以另外下載cnpm,各種加速配置之類的也不再贅述了,信息太多。下面下載vue和vue腳手架:
# 安裝vue
npm i vue -g
# 安裝vue腳手架
npm i vue-cli -g
簡單介紹一下,npm下載有兩種區(qū)別,-g參數(shù)表示全局下載,不帶這個參數(shù)就是局部下載,前者下載安裝的庫和可執(zhí)行文件整個系統(tǒng)可用(只要配好了環(huán)境變量),后者只針對當(dāng)前項目,下載的東西都丟到當(dāng)前項目路徑的node_modules中,同時生成和項目息息相關(guān)的package.json和package-lock.json兩個文件,基本都是包信息。
然后進行項目初始化:
vue init webpack vue-login
上面的主命令是vue init,進行初始化用上了webpack包,并且命名項目名為vue-login,然后后面會有一系列命令行問答,根據(jù)你回答的信息進行自定義設(shè)置項目信息,比如項目名、某某技術(shù)要不要用什么的。如下:
? Project name vue-login
? Project description A Vue.js project
? Author JackSama <[email protected]>
? 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) npm
大致上就這樣的一些問答,簡單enter就夠了,除非你有特別需求,項目初始化完成以后,它有著提示信息,說開始運行一個項目就切換進去,然后npm run dev,都有提示的(以后想自己開發(fā)一個,這些信息提示的完成就已經(jīng)夠煩人了)。一個簡單項目結(jié)構(gòu)如下:
現(xiàn)在還么做任何改動的情況下,跑起來的vue項目時這樣的:
簡單來看一下流程,其實針對一個簡單的項目開發(fā),主要關(guān)注src目錄就夠了的,總控就是src下main.js和App.vue兩個文件,前者是程序入口文件,主要是實例化對象,這里就是實例化一個Vue對象,并且引入router、組件compents和一些公共組件,后者是項目的main組件,是頁面的入口文件,也可以說是home頁面; 然后是asset文件夾,存放了一張logo,也可以拿來存放靜態(tài)資源;
然后是components文件夾,用來存放開發(fā)的組件的,比如這里就有個HelloWorld.vue,你看了就會發(fā)現(xiàn),它的語法其實是html語法,也就說vue文件其實可以寫頁面html,不過它又引入了模板語法,可以進行其他部分的擴充,不用完整編輯一個html文件,學(xué)習(xí)過flask的模板的或者django這些個web框架模板語法的應(yīng)該很容易上手,都是Jinja2那一類的模板語法應(yīng)用。
最后是重要的router目錄,顧名思義,路由部分嘛,注冊路由的,具體注冊倒是很像django框架的urls.py,真的是一法通萬法通啊,積累的作用看出來了。對于新手來說,應(yīng)當(dāng)關(guān)注router中index.js的routes信息,里面只設(shè)置了一個路由。
要注意的是,關(guān)于項目的一些信息設(shè)置,就關(guān)注根目錄下config目錄中信息,一般看index.js就夠了,里面可以設(shè)置host、port以及一些特定文件夾信息。比如要設(shè)置熱更方便debug,就給dev信息中添加hot為true就行,要設(shè)置局域網(wǎng)可訪問而不是局限于本機那就設(shè)置host為0.0.0.0,這些都可以在index.js進行設(shè)置。
進行開發(fā)
因為只要一個簡單的登錄頁面,沒有后續(xù)其他頁面互動了,所以直接修改components下HelloWorld.vue,因為不關(guān)注樣式,所以不修改style,只關(guān)注template中內(nèi)容:
<template>
<div align="center" class="hello">
<table>
<tr><td height="80">注冊</td></tr>
</table>
<form action="/register" method="post">
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" name="user" required></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="text" name="pwd" required></td>
</tr>
<tr>
<td>再次輸入密碼:</td>
<td><input type="text" name="pwd1" required></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="gender" value="1"/>
<label for="gender1">男</label>
<input type="radio" name="gender" value="0">
<label for="gender2">女</label>
</td>
</tr>
<tr>
<td>民族:</td>
<td>
<select name="nation">
<option value="1" selected>漢族</option>
<option value="2">壯族</option>
<option value="3">苗族</option>
<option value="4">回族</option>
<option value="5">傣族</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="checkbox" name="confirm">
<label>我同意<a href="/protocol">協(xié)議</a></label>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注冊"></td>
</tr>
</table>
</form>
</div>
</template>
如上,直接把上面的html中的主體body部分給template進行替換了就行,因為要應(yīng)用它框架早期設(shè)計的樣式,所以給整個div給用上之前的class,因為它的樣式是綁定class的。而且設(shè)置了熱更,直接保存更改就能在頁面看到效果了。效果如下:
這樣就不用針對路由進行其他設(shè)置了,如果不需要上面的logo,可以修改src根目錄下App.vue的template部分,因為上面的內(nèi)容是渲染到這里的,丟棄這里的img就好。拋開vue框架,把vue作為庫進行引入,其實上面的實現(xiàn)就是這樣的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-login</title>
<script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<img src="./assets/logo.png">
<div align="center" class="hello">
<table>
<tr><td height="80">注冊</td></tr>
</table>
<form action="/register" method="post">
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" name="user" required></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="text" name="pwd" required></td>
</tr>
<tr>
<td>再次輸入密碼:</td>
<td><input type="text" name="pwd1" required></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="gender" value="1"/>
<label for="gender1">男</label>
<input type="radio" name="gender" value="0">
<label for="gender2">女</label>
</td>
</tr>
<tr>
<td>民族:</td>
<td>
<select name="nation">
<option value="1" selected>漢族</option>
<option value="2">壯族</option>
<option value="3">苗族</option>
<option value="4">回族</option>
<option value="5">傣族</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="checkbox" name="confirm">
<label>我同意<a href="/protocol">協(xié)議</a></label>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注冊"></td>
</tr>
</table>
</form>
</div>
</div>
<script>
export default {
name: 'App'
}
</script>
</body>
</html>
上面只是大致上做了一個拼接,讓它更加貼合html一點,并不是嚴(yán)格的執(zhí)行標(biāo)準(zhǔn),要跑起來還得處理圖片路徑等問題。
一些簡單的vue語法
針對vue的一些學(xué)習(xí),可以查看vue中文文檔,不過它是那種,嗯,讓你不知道怎么下手的或者說你有過一定其他功底的才能明白它的一些自然而然的行為的,總之對初學(xué)者不友好吧。在vue中,綁定一些數(shù)據(jù),使用的是{{...}}的樣式,這也是在flask和django中通用的模板語法,或者說是我所知道的叫Jinja2的語法。如下:
<div id="app">
<p>{{ msg }}</p>
</div>
針對msg的具體信息,可以使用script來進行一些個定義:
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
如上進行調(diào)用,在HelloWorld被調(diào)用以后,msg就給賦以了'Welcome to Your Vue.js App'的信息,然后可以渲染到上面的msg里面。下面這個例子的使用是挺有意思的:
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
通過script來進行一些變量的定義,然后在div中進行應(yīng)用。script中是針對js的語法,所以各種框架,基礎(chǔ)都是js,這是基石,而學(xué)習(xí)vue,除了js以外,還需要學(xué)習(xí)如何使用html的模板語法來進行DOM和底層vue實例的綁定。
用其他版本進行實現(xiàn)
嗯,要知道的是,上面的vue的實現(xiàn)用的是版本2.9,用的是vue-cli對應(yīng)2.x版本的腳手架,對應(yīng)3.x版本的腳手架,用的是@vue/cli。vue2創(chuàng)建項目,用的是vue init webpack
,vue3用的是vue create
,后者的應(yīng)用,想要有個模板來進行項目初始化,需要安裝全局橋接工具@vue/cli-init,然后運行命令是npm run serve
。下面在ubuntu中進行一下嘗試:
sudo apt update
sudo apt install node npm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
如上在ubuntu中進行node和npm以及cnpm的安裝,前者是編譯運行主體,后兩者是包管理器,然后來下載vue3版本的腳手架來進行:
sudo npm install -g @vue/cli
# 檢查全局安裝列表
sudo npm list -g --depth 0
/usr/local/lib
├── @vue/[email protected]
├── [email protected]
└── [email protected]
開啟一個項目:
# 檢驗vue版本
vue -V
vue create hello-world
開啟項目的一系列設(shè)置用的是vue3和一些默認設(shè)置,在項目完成創(chuàng)建以后,輸出提示如下:
Successfully created project hello-world.
Get started with the following commands:
$ cd hello-world
$ npm run serve
如上,接下來運行起來的命令就是npm run serve
了,運行起來后發(fā)現(xiàn),該服務(wù)可以通過局域網(wǎng)進行訪問,效果如下:
簡單的針對單頁面的設(shè)計,和上面一樣,針對src中components的HelloWorld.vue進行設(shè)計,只改動template即可。修改效果如下:
ok,可以進行了,把前面的登錄頁面的簡單實現(xiàn)給copy到HelloWorld.vue中template,代碼已經(jīng)在上面,就不再過多修改。