0デモンストレーション効果
挿入ビデオプラグインは入って来て、迷惑されていません。Youkuのは、外に出て右の外観を変えることができます（私を指します！）。
1.準備
1.1フロントエンドフレーム
nuxt.js.ベースvue.jsの先端を使用してください なぜnuxt.js？
私が最初にすることはブログのプロジェクトなので、SSRが不可欠です。記事axiosが非同期取得する場合は、ログイン登録と話をするこの記事は問題ではなく、検索エンジンがデータのいずれかを把握することができないわけではありませんが。nuxt.jsで検討するプロジェクト全体のために言うことができます。
第二の点は、Nuxt.jsプロジェクトは非常に簡単で、ルーティングとテンプレートの機能を非常に明確に整理、簡単で、便利なフロントエンドとサーバーが通信します。そして、自動的に構文es67をサポートしており、nodemonなどの機能はそれらを繰り返さないが付属しています。百度への無料インタレスト。
1.2バックエンドのフレームワーク
koa2では、使用済みのNuxt.js場合は、することができます直接サーバー上のプロジェクトディレクトリのセクションの後。0202にkoa2傾向ではなく、多くの説明、両方を使用し、問題がないので、プラグを表明未満。
1.3データベース
コード、または他の一時的なデータセッションを保存するのに適した使いやすいハンドルへの仕事のためのより適切なRedisのキャッシュクラスの一部、および、ので、なぜ一緒に、データベースを使用してMongoDBのをRedisの。ポリマーサン関節動作およびマルチステージパイプライン等で、適切なデータベースをMongoDBは、匹敵MySQLの他のリレーショナルデータベースとすることができます。私は、フロントエンドまあ、マングースの文言より快適なスポットをしていますので、しかし、私はMongoDBのを選んだので。
1.4uiフレームワーク
私たちはスーツに従うことを、よくを使用しているので、要素-UIでは、なぜ、要素、UIを行います。
ビルドに2.プロジェクト
直接への関心の言葉だけよりももっとnuxt.js公式サイト。
まずNPXをインストールして使用して 作成-nuxtアプリを プロジェクトには、次のコマンドラインを作成します。
$作成-nuxtアプリのNPXプロジェクト名を
その後、いくつかの口に言及し、いくつかのピットが存在し、そのうちのプロジェクトに入るためにプロンプトに従ってください。
- 一方、configureバベルにしたいので、次のように歴史的な理由により、バックエンドは、デフォルトes6import構文によってサポートされていません。
- プラグ NPM Iバベル・プリセット・es2015
- 新しいプロジェクトのディレクトリで .babelrcの ファイル、および、コンテンツ内の入力 { 「プリセット」：[ 「ES2015を」]} とセーブ。
- 最後に package.json で 「スクリプト」 内 devが スタートは 最後に追加 --execバベルノード とセーブ。以下の
-
1 " スクリプト" ：{ 2 " DEV "：" --execバベルノードをサーブ--watchサーバ/ index.js nodemonクロスENV NODE_ENV =開発" 、 3 " ビルド"：" nuxtビルド" 、 4 " 開始"：" クロスENV NODE_ENV =プロダクション・ノード・サーバ/ index.js --execバベルノード" 、 5は " 生成"：" 生成nuxt " 6 }、
ビルド3.プロジェクト
3.1プロジェクトの内容紹介
まずは、ディレクトリnuxt.jsを観察してみましょう、我々はおおよそプロジェクトを作成する方法を見ることができます。
説明するために一つずつ
- 資産名のとおり、静的リソースにコンパイルされていない場所に置きます。
- コンポーネントとスタック
- フレームの意味と等価である特定のテンプレートを置くことができるテンプレートのレイアウト
- ミドルウェアミドルウェア。
- node_modulesは場所を頼りに置きます
- 新しい1.vueは、ルーティングの構成と同等であるページをそのページ、あなたが設定さnuxt.js、「/ 1」。
- 地元のプラグインは、プラグインが事前に設定され、その後、エクスポートすることができ、プラグを置きます。
- それはやや複雑で、バックエンドサーバのフォルダ、である、そしてので、少し後で述べ展開します。
- ローカル静的の静的ファイル
- 店舗モデルはvuex場所を置きます
詳細なドキュメントを参照してください（ポイント私を！）
3.2フロントエンド構造
フロントエンドの焦点は、特に大規模ではない、それだけで、やや複雑なフォームの検証であるが、幸い要素-UIは、作業を行う必要があります。
しかし、まだ簡単には再びゼロから、最初は新しいテンプレートは、テンプレートは、フレームの外側に設定されています
示されているように、緑色のボックスがテンプレートに相当し、その活性部分は、ページのコンテンツに相当し、実際にそうであるという事実でVUE-ルータVUE-CLIの場合、ページコンテンツが、nuxt.jsは、引数を変更しました。
1 <template> 2 <div class="body1"> 3 <div class="container animated slideInDown"> 4 <header> 5 <Myheader :location="this.location" /> 6 </header> 7 <main class="main"> 8 <nuxt /> 9 </main> 10 <footer> 11 <Myfooter /> 12 </footer> 13 </div> 14 </div> 15 </template>
1 <script> 2 import Myheader from "../components/public/header"; 3 import Myfooter from "../components/public/footer"; 4 export default { 5 components: { 6 Myheader, 7 Myfooter 8 }, 9 data: () => { 10 return { 11 location: "" 12 }; 13 }, 14 mounted() { 15 this.location = window.location.href.split("/").pop(); 16 } 17 }; 18 </script>
这的location属性是为了判断模板顶上的登录注册字样是否要在登录页面注册页面出现。不过这都不是重点，重点是本文要讲的登录注册功能，所以理所当然这里就是随便讲一下。不做过多的描述。
3.2.1注册页面搭建
不多废话，直接看代码，代码位置 @/pages/register.js
<template> <div class="login_container"> <!-- 首先element表单的外标签。标签里的属性可以参考element-ui文档的Form表单 --> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm" label-width="100px" size="small" > <!-- 其中表单项用el-form-item标签包起来，证明这是一个表单项目 --> <el-form-item label="用户名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="ruleForm.password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="password2"> <el-input v-model="ruleForm.password2"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="ruleForm.email"></el-input> <el-button @click="sendMsg" class="sendemail" :disabled="ruleForm.verifyflag" >{{ ruleForm.verifymsg }}</el-button> </el-form-item> <el-form-item label="验证码" prop="code"> <el-input v-model="ruleForm.code"></el-input> </el-form-item> <el-form-item> <el-button @click="submitForm('ruleForm')">注册</el-button> <!-- <el-button @click="resetForm('ruleForm')"></el-button> --> </el-form-item> </el-form> </div> </template>
接着放代码，是用来接收表单信息的 ruleForm 对象
1 ruleForm: { 2 name: "", 3 password: "", 4 password2: "", 5 email: "", 6 code: "", 7 verifymsg: "发送验证码", // 要设置成动态的data，而不是直接填写在按钮里是因为data需要变化，直接操作data方便一点。 8 verifyflag: false // 测试现在按钮是否可以点击，因为60秒之内不能重复发验证码 9 },
表单现在校验不需要直接操作dom节点或者验证ruleForm里的数据。因为element-ui提供了校验的方法。控制着校验方法的就是其中表单的属性 :rules="rules" 的rules对象。
老样子直接放代码:
1 rules: { 2 name: [{ required: true, message: "请输入用户名", trigger: "blur" }], 3 password: [{ required: true, message: "请输入密码", trigger: "blur" }], 4 password2: [ 5 { 6 required: true, 7 8 message: "请确认您的密码", 9 trigger: "blur" 10 }, 11 { 12 validator: (rule, value, callback) => { 13 if (value === "") { 14 callback(new Error("请再次输入密码")); 15 } else if (value !== this.ruleForm.password) { 16 callback(new Error("两次输入密码不一致")); 17 } else { 18 callback(); 19 } 20 }, 21 trigger: "blur" 22 } 23 ], 24 email: [ 25 { 26 required: true, 27 type: "email", 28 message: "请正确输入您的邮箱", 29 trigger: "blur" 30 } 31 ], 32 code: [ 33 { 34 required: true, 35 message: "请正确输入您的验证码", 36 trigger: "blur" 37 } 38 ] 39 }
简单讲解一下，rules的每个属性都是一个数组，里面放着对象，就是校验这个表单同名属性的方法。比较简单的就类似校验name属性，只需要判断他是否是必填的，如果每天就提示message的信息。
复杂一点的就像password2一样，在校验数组里有第二个对象，添加一个validator方法就行了。后面的参数和更详细的用法欢迎看文档（点我！）
就这样现在这个表单已经可以做前端的校验了。添加方法等后端完成（下篇博客）以后再说。
同理我们新建 @/pages/login.vue 时，同样自动创建好了login的路由，我们只需要专注代码即可。
1 <template> 2 <div class="login_container"> 3 <el-form 4 :model="ruleForm" 5 :rules="rules" 6 ref="ruleForm" 7 class="ruleForm" 8 label-width="100px" 9 size="small" 10 > 11 <el-form-item label="用户名" prop="name"> 12 <el-input v-model="ruleForm.name"></el-input> 13 </el-form-item> 14 <el-form-item label="密码" prop="password"> 15 <el-input v-model="ruleForm.password" show-password></el-input> 16 </el-form-item> 17 <el-form-item> 18 <el-button @click="submitForm('ruleForm')">登录</el-button> 19 <el-button @click="resetForm('ruleForm')">注册</el-button> 20 </el-form-item> 21 </el-form> 22 </div> 23 </template> 24 25 <script>
同理上script代码
1 data() { 2 return { 3 ruleForm: { 4 name: "", 5 password: "" 6 }, 7 rules: { 8 name: [{ required: true, message: "请输入用户名", trigger: "blur" }], 9 password: [{ required: true, message: "请输入密码", trigger: "blur" }] 10 } 11 };
ok，前端大体就是这样，还是比较简单的。
但是css问题暂时没有写，毕竟自己不是做ui的，简洁大方就行了，功能性足够就好。