ArthurSlogSLog-29Year·1Guangzhou·ChinaAug 3th GitHub掘金主页简书主页segmentfault
大学毕业 交了几万块钱的学费 完成了所有学业要求 然后社会就会为你买单吗？ 有的人花了几十万也只是获得月薪几千块的一个职位 而你 花了几万块钱和几个月的时间 就想让社会每月掏个万把块钱来买单啊？ 就这样的智商 先不论培训得会不会 这样的智力水平迟早也得返乡
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
Slog1_如何使用nodejs与mysql进行数据交互Slog4_使用后端框架KOA实现静态web服务器Slog6_使用vue前端框架实现单页应用(SPA)Slog24Slog25Slog26前端部分：
统计页面-计算属性和侦听器、/v2/guide... 主页：index.html注册界面-条件渲染、/v2/guide... :signup.html登陆界面 :signin.html后台用户管理的界面-列表渲染、/v2/guide... 用户界面: account.hmtl调查问卷-文本、多行文本、复选框、单选按钮、选择框、/v2/guide... : form.html离开页面提醒-事件处理、/v2/guide... 移动端样式兼容-Class与Style绑定、/v2/guide...后端部分：
数据库数据交互模块-部署、配置静态web服务器用户注册模块用户登陆模块统计分析模块用户状态模块-超时、无效、非法关键思路
开始编码
切换至 client 文件夹路径下cd client创建一个新的文件夹 “js” 用于存放前端的 js 文件
mkdir js我们现在来更新 signup.html 注册页面的前端样式，在js文件夹里创建一个js文件 signup.js，这个，就是vue框架文件，指导客户端前端的js文件
cd js
signup.js
new Vue({el: '#signup-container',data: {sex: ''}})
我们在 signup.html 里面引用这个新编写的js文件
signup.html
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./css/style.css" ><title>signup_ArthurSlog</title></head><body><div class="signup-container"><div>This is signup's page by ArthurSlog</div><p>Singup</p><form action="http://127.0.0.1:3000/signup" method="GET">Account: <br><input type="text" name="name"> <br>Password: <br><input type="text" name="password"><br>Again Password: <br><input type="text" name="repassword"><br>First Name: <br><input type="text" name="firstname"><br>Last Name: <br><input type="text" name="lastname"><br>Birthday: <br><input type="text" name="birthday"><br><br><div><span>Sex: {{ sex }}</span><br><input type="radio" id="one" value="Male" v-model="sex"><label for="one">Male</label><br><input type="radio" id="two" value="Female" v-model="sex"><label for="two">Female</label></div><br><br>Age: <br><input type="text" name="age"><br>Wechart: <br><input type="text" name="wechart"><br>QQ: <br><input type="text" name="qq"><br>Email: <br><input type="text" name="email"><br>Contury: <br><input type="text" name="contury"><br>Address: <br><input type="text" name="address"><br>Phone: <br><input type="text" name="phone"><br>Websize: <br><input type="text" name="websize"><br>Github: <br><input type="text" name="github"><br>Bio: <br><input type="text" name="bio"><br><br><input type="submit" value="完成注册"></form><a href="./form.html">Signup</a><br><a href="./index.html">Return index's page</a><br><br></div> </body></html>
切换至server文件夹路径下
cd server现在，启动静态web服务器
node index.js现在打开浏览器，在地址栏输入 127.0.0.1:3000，正常显示主页后，点击 signup 链接，正常情况下，你会看到 sex 选项变成单选按钮了至此，我们使用 vue模版语言 更新了 signup.html 这个注册页面的 sex 选项的样式为单选按钮。
