宅男在线永久免费观看网直播,亚洲欧洲日产国码无码久久99,野花社区在线观看视频,亚洲人交乣女bbw,一本一本久久a久久精品综合不卡

全部
常見問(wèn)題
產(chǎn)品動(dòng)態(tài)
精選推薦

從零開始：登錄頁(yè)面的簡(jiǎn)單實(shí)現(xiàn)教程，讓你的網(wǎng)站更具吸引力！

管理 管理 編輯 刪除
CRMEB-慕白寒窗雪 2023-12-05 09:43:28
其他

簡(jiǎn)單實(shí)現(xiàn)

首先是簡(jiǎn)單html的實(shí)現(xiàn)的登錄頁(yè)面：

<!DOCTYPE html>
<html>
    <head>
        <title>注冊(cè)</title>
    </head>
    <body>
        <form action="/register" method="post">
            <fieldset>
            <legend>注冊(cè)</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="注冊(cè)">
            </fieldset>
        </form>
    </body>
</html>

不加樣式的注冊(cè)頁(yè)面就這樣，對(duì)應(yīng)的登錄頁(yè)面也就刪去重復(fù)輸入密碼環(huán)節(jié)而已：

發(fā)現(xiàn)用table可以讓頁(yè)面美化一點(diǎn)，所以：

<!DOCTYPE html>
<html>
    <head>
        <title>注冊(cè)</title>
    </head>
    <body>
        <div align="center">
            <table>
                <tr><td height="80">注冊(cè)</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="注冊(cè)"></td>
                </tr>
            </table>
        </form>
        </div>
    </body>
</html>

如上，使用三個(gè)table，第一個(gè)是用來(lái)提示的，最后一個(gè)是用來(lái)包囊submit的，分開主要是為了讓它可以居中，如果在一個(gè)table里面，只會(huì)在一個(gè)格子里居中而不是整個(gè)頁(yè)面效果，所以拆開了。另外給添加了性別的選擇框和漢族的下拉列表。

另外的想要注冊(cè)按鈕在兩個(gè)格子中間，可以使用colspan屬性。

使用vue進(jìn)行實(shí)現(xiàn)

要使用vue，首先要安裝nodejs，因?yàn)関ue本身算是nodejs的一個(gè)框架，官網(wǎng)下載地址：

https://nodejs.org/zh-cn/download

因?yàn)橛形⑿虐l(fā)文的需求，就不使用md語(yǔ)法來(lái)內(nèi)嵌鏈接了，直接發(fā)這好復(fù)制吧。下載好node以后，就可以使用npm這個(gè)包管理器了，也可以另外下載cnpm，各種加速配置之類的也不再贅述了，信息太多。下面下載vue和vue腳手架：

# 安裝vue
npm i vue -g
# 安裝vue腳手架
npm i vue-cli -g

簡(jiǎn)單介紹一下，npm下載有兩種區(qū)別，-g參數(shù)表示全局下載，不帶這個(gè)參數(shù)就是局部下載，前者下載安裝的庫(kù)和可執(zhí)行文件整個(gè)系統(tǒng)可用(只要配好了環(huán)境變量)，后者只針對(duì)當(dāng)前項(xiàng)目，下載的東西都丟到當(dāng)前項(xiàng)目路徑的node_modules中，同時(shí)生成和項(xiàng)目息息相關(guān)的package.json和package-lock.json兩個(gè)文件，基本都是包信息。

然后進(jìn)行項(xiàng)目初始化：

vue init webpack vue-login

上面的主命令是vue init，進(jìn)行初始化用上了webpack包，并且命名項(xiàng)目名為vue-login，然后后面會(huì)有一系列命令行問(wèn)答，根據(jù)你回答的信息進(jìn)行自定義設(shè)置項(xiàng)目信息，比如項(xiàng)目名、某某技術(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

大致上就這樣的一些問(wèn)答，簡(jiǎn)單enter就夠了，除非你有特別需求，項(xiàng)目初始化完成以后，它有著提示信息，說(shuō)開始運(yùn)行一個(gè)項(xiàng)目就切換進(jìn)去，然后npm run dev，都有提示的(以后想自己開發(fā)一個(gè)，這些信息提示的完成就已經(jīng)夠煩人了)。一個(gè)簡(jiǎn)單項(xiàng)目結(jié)構(gòu)如下：

現(xiàn)在還么做任何改動(dòng)的情況下，跑起來(lái)的vue項(xiàng)目時(shí)這樣的：

簡(jiǎn)單來(lái)看一下流程，其實(shí)針對(duì)一個(gè)簡(jiǎn)單的項(xiàng)目開發(fā)，主要關(guān)注src目錄就夠了的，總控就是src下main.js和App.vue兩個(gè)文件，前者是程序入口文件，主要是實(shí)例化對(duì)象，這里就是實(shí)例化一個(gè)Vue對(duì)象，并且引入router、組件compents和一些公共組件，后者是項(xiàng)目的main組件，是頁(yè)面的入口文件，也可以說(shuō)是home頁(yè)面； 然后是asset文件夾，存放了一張logo，也可以拿來(lái)存放靜態(tài)資源；
然后是components文件夾，用來(lái)存放開發(fā)的組件的，比如這里就有個(gè)HelloWorld.vue，你看了就會(huì)發(fā)現(xiàn)，它的語(yǔ)法其實(shí)是html語(yǔ)法，也就說(shuō)vue文件其實(shí)可以寫頁(yè)面html，不過(guò)它又引入了模板語(yǔ)法，可以進(jìn)行其他部分的擴(kuò)充，不用完整編輯一個(gè)html文件，學(xué)習(xí)過(guò)flask的模板的或者django這些個(gè)web框架模板語(yǔ)法的應(yīng)該很容易上手，都是Jinja2那一類的模板語(yǔ)法應(yīng)用。
最后是重要的router目錄，顧名思義，路由部分嘛，注冊(cè)路由的，具體注冊(cè)倒是很像django框架的urls.py，真的是一法通萬(wàn)法通啊，積累的作用看出來(lái)了。對(duì)于新手來(lái)說(shuō)，應(yīng)當(dāng)關(guān)注router中index.js的routes信息，里面只設(shè)置了一個(gè)路由。

要注意的是，關(guān)于項(xiàng)目的一些信息設(shè)置，就關(guān)注根目錄下config目錄中信息，一般看index.js就夠了，里面可以設(shè)置host、port以及一些特定文件夾信息。比如要設(shè)置熱更方便debug，就給dev信息中添加hot為true就行，要設(shè)置局域網(wǎng)可訪問(wèn)而不是局限于本機(jī)那就設(shè)置host為0.0.0.0，這些都可以在index.js進(jìn)行設(shè)置。

進(jìn)行開發(fā)

因?yàn)橹灰粋€(gè)簡(jiǎn)單的登錄頁(yè)面，沒有后續(xù)其他頁(yè)面互動(dòng)了，所以直接修改components下HelloWorld.vue，因?yàn)椴魂P(guān)注樣式，所以不修改style，只關(guān)注template中內(nèi)容：

<template>
    <div align="center" class="hello">
        <table>
            <tr><td height="80">注冊(cè)</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="注冊(cè)"></td>
            </tr>
        </table>
    </form>
    </div>
</template>

如上，直接把上面的html中的主體body部分給template進(jìn)行替換了就行，因?yàn)橐獞?yīng)用它框架早期設(shè)計(jì)的樣式，所以給整個(gè)div給用上之前的class，因?yàn)樗臉邮绞墙壎╟lass的。而且設(shè)置了熱更，直接保存更改就能在頁(yè)面看到效果了。效果如下：

這樣就不用針對(duì)路由進(jìn)行其他設(shè)置了，如果不需要上面的logo，可以修改src根目錄下App.vue的template部分，因?yàn)樯厦娴膬?nèi)容是渲染到這里的，丟棄這里的img就好。拋開vue框架，把vue作為庫(kù)進(jìn)行引入，其實(shí)上面的實(shí)現(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">注冊(cè)</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="注冊(cè)"></td>
                </tr>
            </table>
        </form>
        </div>
    </div>
    <script>
    export default {
    name: 'App'
    }
    </script>
</body>
</html>

上面只是大致上做了一個(gè)拼接，讓它更加貼合html一點(diǎn)，并不是嚴(yán)格的執(zhí)行標(biāo)準(zhǔn)，要跑起來(lái)還得處理圖片路徑等問(wèn)題。

一些簡(jiǎn)單的vue語(yǔ)法

針對(duì)vue的一些學(xué)習(xí)，可以查看vue中文文檔，不過(guò)它是那種，嗯，讓你不知道怎么下手的或者說(shuō)你有過(guò)一定其他功底的才能明白它的一些自然而然的行為的，總之對(duì)初學(xué)者不友好吧。在vue中，綁定一些數(shù)據(jù)，使用的是{{...}}的樣式，這也是在flask和django中通用的模板語(yǔ)法，或者說(shuō)是我所知道的叫Jinja2的語(yǔ)法。如下：

<div id="app">
    <p>{{ msg }}</p>
</div>

針對(duì)msg的具體信息，可以使用script來(lái)進(jìn)行一些個(gè)定義：

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

如上進(jìn)行調(diào)用，在HelloWorld被調(diào)用以后，msg就給賦以了'Welcome to Your Vue.js App'的信息，然后可以渲染到上面的msg里面。下面這個(gè)例子的使用是挺有意思的：

<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>

通過(guò)script來(lái)進(jìn)行一些變量的定義，然后在div中進(jìn)行應(yīng)用。script中是針對(duì)js的語(yǔ)法，所以各種框架，基礎(chǔ)都是js，這是基石，而學(xué)習(xí)vue，除了js以外，還需要學(xué)習(xí)如何使用html的模板語(yǔ)法來(lái)進(jìn)行DOM和底層vue實(shí)例的綁定。

用其他版本進(jìn)行實(shí)現(xiàn)

嗯，要知道的是，上面的vue的實(shí)現(xiàn)用的是版本2.9，用的是vue-cli對(duì)應(yīng)2.x版本的腳手架，對(duì)應(yīng)3.x版本的腳手架，用的是@vue/cli。vue2創(chuàng)建項(xiàng)目，用的是vue init webpack，vue3用的是vue create，后者的應(yīng)用，想要有個(gè)模板來(lái)進(jìn)行項(xiàng)目初始化，需要安裝全局橋接工具@vue/cli-init，然后運(yùn)行命令是npm run serve。下面在ubuntu中進(jìn)行一下嘗試：

sudo apt update
sudo apt install node npm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

如上在ubuntu中進(jìn)行node和npm以及cnpm的安裝，前者是編譯運(yùn)行主體，后兩者是包管理器，然后來(lái)下載vue3版本的腳手架來(lái)進(jìn)行：

sudo npm install -g @vue/cli
# 檢查全局安裝列表
sudo npm list -g --depth 0
/usr/local/lib
├── @vue/[email protected]
├── [email protected]
└── [email protected]

開啟一個(gè)項(xiàng)目：

# 檢驗(yàn)vue版本
vue -V
vue create hello-world

開啟項(xiàng)目的一系列設(shè)置用的是vue3和一些默認(rèn)設(shè)置，在項(xiàng)目完成創(chuàng)建以后，輸出提示如下：

Successfully created project hello-world.
   Get started with the following commands:

 $ cd hello-world
 $ npm run serve

如上，接下來(lái)運(yùn)行起來(lái)的命令就是npm run serve了，運(yùn)行起來(lái)后發(fā)現(xiàn)，該服務(wù)可以通過(guò)局域網(wǎng)進(jìn)行訪問(wèn)，效果如下：

簡(jiǎn)單的針對(duì)單頁(yè)面的設(shè)計(jì)，和上面一樣，針對(duì)src中components的HelloWorld.vue進(jìn)行設(shè)計(jì)，只改動(dòng)template即可。修改效果如下：

ok，可以進(jìn)行了，把前面的登錄頁(yè)面的簡(jiǎn)單實(shí)現(xiàn)給copy到HelloWorld.vue中template，代碼已經(jīng)在上面，就不再過(guò)多修改。


請(qǐng)登錄后查看

html vue 登錄頁(yè)面

CRMEB-慕白寒窗雪 最后編輯于2023-12-05 09:43:28

快捷回復(fù)
回復(fù)
回復(fù)
回復(fù)（{{post_count}}) {{!is_user ? '我的回復(fù)' :'全部回復(fù)'}}
排序 默認(rèn)正序 回復(fù)倒序 點(diǎn)贊倒序

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}} LV.{{ item.user_info.bbs_level || item.bbs_level }}

作者 管理員 企業(yè)

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest == 1? '取消推薦': '推薦'}}
{{item.is_suggest == 1? '取消推薦': '推薦'}}
沙發(fā) 板凳 地板 {{item.floor}}#
{{item.user_info.title || '暫無(wú)簡(jiǎn)介'}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
打賞
已打賞￥{{item.reward_price}}
{{item.like_count}}
{{item.showReply ? '取消回復(fù)' : '回復(fù)'}}
刪除
回復(fù)
回復(fù)

{{itemc.user_info.nickname}}

{{itemc.user_name}}

回復(fù) {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}
打賞
已打賞￥{{itemc.reward_price}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回復(fù)' : '回復(fù)'}}
刪除
回復(fù)
回復(fù)
查看更多
打賞
已打賞￥{{reward_price}}
3551
{{like_count}}
{{collect_count}}
添加回復(fù) ({{post_count}})

相關(guān)推薦

快速安全登錄

使用微信掃碼登錄
{{item.label}} 加精
{{item.label}} {{item.label}} 板塊推薦 常見問(wèn)題 產(chǎn)品動(dòng)態(tài) 精選推薦 首頁(yè)頭條 首頁(yè)動(dòng)態(tài) 首頁(yè)推薦
取 消 確 定
回復(fù)
回復(fù)
問(wèn)題:
問(wèn)題自動(dòng)獲取的帖子內(nèi)容,不準(zhǔn)確時(shí)需要手動(dòng)修改. [獲取答案]
答案:
提交
 bug 需求 取 消 確 定
打賞金額
當(dāng)前余額：￥{{rewardUserInfo.reward_price}}
{{item.price}}元
請(qǐng)輸入 0.1-{{reward_max_price}} 范圍內(nèi)的數(shù)值
打賞成功
￥{{price}}
完成 確認(rèn)打賞

微信登錄/注冊(cè)

切換手機(jī)號(hào)登錄

{{ bind_phone ? '綁定手機(jī)' : '手機(jī)登錄'}}

{{codeText}}
切換微信登錄/注冊(cè)
暫不綁定
CRMEB客服

CRMEB咨詢熱線 咨詢熱線

400-8888-794

微信掃碼咨詢

CRMEB開源商城下載 源碼下載 CRMEB幫助文檔 幫助文檔
返回頂部 返回頂部
CRMEB客服