用 Nuxt.js 实现一个简单的论坛网站。
demo 的 github 地址：https://github.com/gothinkster/realworld

项目初始化

  1. 新建文件夹
  2. 初始化package.json
  3. 添加命令
  4. 添加nuxt模块
  5. 添加pages文件夹，新建index.vue文件
  6. 运行项目

下载模板

从 github 复制模板。

app.html

  1. <!DOCTYPE html>
  2. <html {{ HTML_ATTRS }}>
  3.   <head {{ HEAD_ATTRS }}>
  4.     {{ HEAD }}
  5.     <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
  6.     <link
  7.       href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css"
  8.       rel="stylesheet"
  9.       type="text/css"
  10.     />
  11.     <link
  12.       href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
  13.       rel="stylesheet"
  14.       type="text/css"
  15.     />
  16.     <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
  17.     <!-- <link rel="stylesheet" href="//demo.productionready.io/main.css"> -->
  18.     <link rel="stylesheet" href="/index.css" />
  19.   </head>
  20.   <body {{ BODY_ATTRS }}>
  21.     {{ APP }}
  22.   </body>
  23. </html>

布局组件

pages/layout/index.vue：

  1. <template>
  2.   <div>
  3.     <nav class="navbar navbar-light">
  4.       <div class="container">
  5.         <nuxt-link
  6.           class="navbar-brand"
  7.           to="/"
  8.         >conduit</nuxt-link>
  9.         <ul class="nav navbar-nav pull-xs-right">
  10.           <li class="nav-item">
  11.             <!-- Add "active" class when you're on that page" -->
  12.             <nuxt-link
  13.               class="nav-link"
  14.               to="/"
  15.               exact
  16.             >Home</nuxt-link>
  17.           </li>
  18.           <li class="nav-item">
  19.             <nuxt-link
  20.               class="nav-link"
  21.               to="/editor"
  22.             >
  23.               <i class="ion-compose"></i>&nbsp;New Post
  24.             </nuxt-link>
  25.           </li>
  26.           <li class="nav-item">
  27.             <nuxt-link
  28.               class="nav-link"
  29.               to="/settings"
  30.             >
  31.               <i class="ion-gear-a"></i>&nbsp;Settings
  32.             </nuxt-link>
  33.           </li>
  34.           <li class="nav-item">
  35.             <nuxt-link
  36.               class="nav-link"
  37.               to="/profile/lpz"
  38.             >
  39.               <img
  40.                 class="user-pic"
  41.                 src="http://toutiao.meiduo.site/FtNcS8sKFSYQbtBbd40eFTL6lAs_"
  42.               />
  43.               LPZ
  44.             </nuxt-link>
  45.           </li>
  46.           <li class="nav-item">
  47.             <nuxt-link
  48.               class="nav-link"
  49.               to="/login"
  50.             >Sign in</nuxt-link>
  51.           </li>
  52.           <li class="nav-item">
  53.             <nuxt-link
  54.               class="nav-link"
  55.               to="/register"
  56.             >Sign up</nuxt-link>
  57.           </li>
  58.         </ul>
  59.       </div>
  60.     </nav>
  61.     <nuxt-child />
  62.     <footer>
  63.       <div class="container">
  64.         <nuxt-link
  65.           class="logo-font"
  66.           to="/"
  67.         >conduit</nuxt-link>
  68.         <span class="attribution">
  69.           An interactive learning project from
  70.           <a href="https://kaiwu.lagou.com/">lagou</a>. Code &amp; design licensed under MIT.
  71.         </span>
  72.       </div>
  73.     </footer>
  74.   </div>
  75. </template>

其中的 Home 链接去掉了原本的active样式 class，新增了exact属性，表示必须严格匹配到路径，这是为了处理 Home 链接的高亮。

页面组件

home

  1. <template>
  2.   <div class="home-page">
  3.     <div class="banner">
  4.       <div class="container">
  5.         <h1 class="logo-font">conduit</h1>
  6.         <p>A place to share your knowledge.</p>
  7.       </div>
  8.     </div>
  10.     <div class="container page">
  11.       <div class="row">
  12.         <div class="col-md-9">
  13.           <div class="feed-toggle">
  14.             <ul class="nav nav-pills outline-active">
  15.               <li class="nav-item">
  16.                 <a
  17.                   class="nav-link disabled"
  18.                   href
  19.                 >Your Feed</a>
  20.               </li>
  21.               <li class="nav-item">
  22.                 <a
  23.                   class="nav-link active"
  24.                   href
  25.                 >Global Feed</a>
  26.               </li>
  27.             </ul>
  28.           </div>
  30.           <div class="article-preview">
  31.             <div class="article-meta">
  32.               <a href="profile.html">
  33.                 <img src="http://i.imgur.com/Qr71crq.jpg" />
  34.               </a>
  35.               <div class="info">
  36.                 <a
  37.                   class="author"
  38.                   href
  39.                 >Eric Simons</a>
  40.                 <span class="date">January 20th</span>
  41.               </div>
  42.               <button class="btn btn-outline-primary btn-sm pull-xs-right">
  43.                 <i class="ion-heart"></i> 29
  44.               </button>
  45.             </div>
  46.             <a
  47.               class="preview-link"
  48.               href
  49.             >
  50.               <h1>How to build webapps that scale</h1>
  51.               <p>This is the description for the post.</p>
  52.               <span>Read more...</span>
  53.             </a>
  54.           </div>
  56.           <div class="article-preview">
  57.             <div class="article-meta">
  58.               <a href="profile.html">
  59.                 <img src="http://i.imgur.com/N4VcUeJ.jpg" />
  60.               </a>
  61.               <div class="info">
  62.                 <a
  63.                   class="author"
  64.                   href
  65.                 >Albert Pai</a>
  66.                 <span class="date">January 20th</span>
  67.               </div>
  68.               <button class="btn btn-outline-primary btn-sm pull-xs-right">
  69.                 <i class="ion-heart"></i> 32
  70.               </button>
  71.             </div>
  72.             <a
  73.               class="preview-link"
  74.               href
  75.             >
  76.               <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
  77.               <p>This is the description for the post.</p>
  78.               <span>Read more...</span>
  79.             </a>
  80.           </div>
  81.         </div>
  83.         <div class="col-md-3">
  84.           <div class="sidebar">
  85.             <p>Popular Tags</p>
  87.             <div class="tag-list">
  88.               <a
  89.                 class="tag-pill tag-default"
  90.                 href
  91.               >programming</a>
  92.               <a
  93.                 class="tag-pill tag-default"
  94.                 href
  95.               >javascript</a>
  96.               <a
  97.                 class="tag-pill tag-default"
  98.                 href
  99.               >emberjs</a>
  100.               <a
  101.                 class="tag-pill tag-default"
  102.                 href
  103.               >angularjs</a>
  104.               <a
  105.                 class="tag-pill tag-default"
  106.                 href
  107.               >react</a>
  108.               <a
  109.                 class="tag-pill tag-default"
  110.                 href
  111.               >mean</a>
  112.               <a
  113.                 class="tag-pill tag-default"
  114.                 href
  115.               >node</a>
  116.               <a
  117.                 class="tag-pill tag-default"
  118.                 href
  119.               >rails</a>
  120.             </div>
  121.           </div>
  122.         </div>
  123.       </div>
  124.     </div>
  125.   </div>
  126. </template>

login/register

  1. <template>
  3. <div class="auth-page">
  4.     <div class="container page">
  5.         <div class="row">
  7.             <div class="col-md-6 offset-md-3 col-xs-12">
  8.                 <h1 class="text-xs-center">Sign up</h1>
  9.                 <p class="text-xs-center">
  10.                     <a href="">Have an account?</a>
  11.                 </p>
  13.                 <ul class="error-messages">
  14.                     <li>That email is already taken</li>
  15.                 </ul>
  17.                 <form>
  18.                     <fieldset class="form-group">
  19.                         <input class="form-control form-control-lg" type="text" placeholder="Your Name">
  20.                     </fieldset>
  21.                     <fieldset class="form-group">
  22.                         <input class="form-control form-control-lg" type="text" placeholder="Email">
  23.                     </fieldset>
  24.                     <fieldset class="form-group">
  25.                         <input class="form-control form-control-lg" type="password" placeholder="Password">
  26.                     </fieldset>
  27.                     <button class="btn btn-lg btn-primary pull-xs-right">
  28.                         Sign up
  29.                     </button>
  30.                 </form>
  31.             </div>
  33.         </div>
  34.     </div>
  35. </div>
  38. </template>

profile

  1. <template>
  2.   <div class="profile-page">
  3.     <div class="user-info">
  4.       <div class="container">
  5.         <div class="row">
  6.           <div class="col-xs-12 col-md-10 offset-md-1">
  7.             <img
  8.               class="user-img"
  9.               src="http://i.imgur.com/Qr71crq.jpg"
  10.             />
  11.             <h4>Eric Simons</h4>
  12.             <p>
  13.               Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the
  14.               Hunger Games
  15.             </p>
  16.             <button class="btn btn-sm btn-outline-secondary action-btn">
  17.               <i class="ion-plus-round"></i>
  18.               &nbsp;
  19.               Follow Eric Simons
  20.             </button>
  21.           </div>
  22.         </div>
  23.       </div>
  24.     </div>
  26.     <div class="container">
  27.       <div class="row">
  28.         <div class="col-xs-12 col-md-10 offset-md-1">
  29.           <div class="articles-toggle">
  30.             <ul class="nav nav-pills outline-active">
  31.               <li class="nav-item">
  32.                 <a
  33.                   class="nav-link active"
  34.                   href
  35.                 >My Articles</a>
  36.               </li>
  37.               <li class="nav-item">
  38.                 <a
  39.                   class="nav-link"
  40.                   href
  41.                 >Favorited Articles</a>
  42.               </li>
  43.             </ul>
  44.           </div>
  46.           <div class="article-preview">
  47.             <div class="article-meta">
  48.               <a href>
  49.                 <img src="http://i.imgur.com/Qr71crq.jpg" />
  50.               </a>
  51.               <div class="info">
  52.                 <a
  53.                   class="author"
  54.                   href
  55.                 >Eric Simons</a>
  56.                 <span class="date">January 20th</span>
  57.               </div>
  58.               <button class="btn btn-outline-primary btn-sm pull-xs-right">
  59.                 <i class="ion-heart"></i> 29
  60.               </button>
  61.             </div>
  62.             <a
  63.               class="preview-link"
  64.               href
  65.             >
  66.               <h1>How to build webapps that scale</h1>
  67.               <p>This is the description for the post.</p>
  68.               <span>Read more...</span>
  69.             </a>
  70.           </div>
  72.           <div class="article-preview">
  73.             <div class="article-meta">
  74.               <a href>
  75.                 <img src="http://i.imgur.com/N4VcUeJ.jpg" />
  76.               </a>
  77.               <div class="info">
  78.                 <a
  79.                   class="author"
  80.                   href
  81.                 >Albert Pai</a>
  82.                 <span class="date">January 20th</span>
  83.               </div>
  84.               <button class="btn btn-outline-primary btn-sm pull-xs-right">
  85.                 <i class="ion-heart"></i> 32
  86.               </button>
  87.             </div>
  88.             <a
  89.               class="preview-link"
  90.               href
  91.             >
  92.               <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
  93.               <p>This is the description for the post.</p>
  94.               <span>Read more...</span>
  95.               <ul class="tag-list">
  96.                 <li class="tag-default tag-pill tag-outline">Music</li>
  97.                 <li class="tag-default tag-pill tag-outline">Song</li>
  98.               </ul>
  99.             </a>
  100.           </div>
  101.         </div>
  102.       </div>
  103.     </div>
  104.   </div>
  105. </template>

settings

  1. <template>
  2.   <div class="settings-page">
  3.     <div class="container page">
  4.       <div class="row">
  5.         <div class="col-md-6 offset-md-3 col-xs-12">
  6.           <h1 class="text-xs-center">Your Settings</h1>
  8.           <form>
  9.             <fieldset>
  10.               <fieldset class="form-group">
  11.                 <input
  12.                   class="form-control"
  13.                   placeholder="URL of profile picture"
  14.                   type="text"
  15.                 />
  16.               </fieldset>
  17.               <fieldset class="form-group">
  18.                 <input
  19.                   class="form-control form-control-lg"
  20.                   placeholder="Your Name"
  21.                   type="text"
  22.                 />
  23.               </fieldset>
  24.               <fieldset class="form-group">
  25.                 <textarea
  26.                   class="form-control form-control-lg"
  27.                   placeholder="Short bio about you"
  28.                   rows="8"
  29.                 ></textarea>
  30.               </fieldset>
  31.               <fieldset class="form-group">
  32.                 <input
  33.                   class="form-control form-control-lg"
  34.                   placeholder="Email"
  35.                   type="text"
  36.                 />
  37.               </fieldset>
  38.               <fieldset class="form-group">
  39.                 <input
  40.                   class="form-control form-control-lg"
  41.                   placeholder="Password"
  42.                   type="password"
  43.                 />
  44.               </fieldset>
  45.               <button class="btn btn-lg btn-primary pull-xs-right">Update Settings</button>
  46.             </fieldset>
  47.           </form>
  48.         </div>
  49.       </div>
  50.     </div>
  51.   </div>
  52. </template>

create/edit article

  1. <template>
  2.   <div class="editor-page">
  3.     <div class="container page">
  4.       <div class="row">
  5.         <div class="col-md-10 offset-md-1 col-xs-12">
  6.           <form>
  7.             <fieldset>
  8.               <fieldset class="form-group">
  9.                 <input
  10.                   class="form-control form-control-lg"
  11.                   placeholder="Article Title"
  12.                   type="text"
  13.                 />
  14.               </fieldset>
  15.               <fieldset class="form-group">
  16.                 <input
  17.                   class="form-control"
  18.                   placeholder="What's this article about?"
  19.                   type="text"
  20.                 />
  21.               </fieldset>
  22.               <fieldset class="form-group">
  23.                 <textarea
  24.                   class="form-control"
  25.                   placeholder="Write your article (in markdown)"
  26.                   rows="8"
  27.                 ></textarea>
  28.               </fieldset>
  29.               <fieldset class="form-group">
  30.                 <input
  31.                   class="form-control"
  32.                   placeholder="Enter tags"
  33.                   type="text"
  34.                 />
  35.                 <div class="tag-list"></div>
  36.               </fieldset>
  37.               <button
  38.                 class="btn btn-lg pull-xs-right btn-primary"
  39.                 type="button"
  40.               >Publish Article</button>
  41.             </fieldset>
  42.           </form>
  43.         </div>
  44.       </div>
  45.     </div>
  46.   </div>
  47. </template>

article

  1. <template>
  2.   <div class="article-page">
  3.     <div class="banner">
  4.       <div class="container">
  5.         <h1>How to build webapps that scale</h1>
  7.         <div class="article-meta">
  8.           <a href>
  9.             <img src="http://i.imgur.com/Qr71crq.jpg" />
  10.           </a>
  11.           <div class="info">
  12.             <a
  13.               class="author"
  14.               href
  15.             >Eric Simons</a>
  16.             <span class="date">January 20th</span>
  17.           </div>
  18.           <button class="btn btn-sm btn-outline-secondary">
  19.             <i class="ion-plus-round"></i>
  20.             &nbsp;
  21.             Follow Eric Simons
  22.             <span class="counter">(10)</span>
  23.           </button>
  24.           &nbsp;&nbsp;
  25.           <button class="btn btn-sm btn-outline-primary">
  26.             <i class="ion-heart"></i>
  27.             &nbsp;
  28.             Favorite Post
  29.             <span class="counter">(29)</span>
  30.           </button>
  31.         </div>
  32.       </div>
  33.     </div>
  35.     <div class="container page">
  36.       <div class="row article-content">
  37.         <div class="col-md-12">
  38.           <p>Web development technologies have evolved at an incredible clip over the past few years.</p>
  39.           <h2 id="introducing-ionic">Introducing RealWorld.</h2>
  40.           <p>It's a great solution for learning how other frameworks work.</p>
  41.         </div>
  42.       </div>
  44.       <hr />
  46.       <div class="article-actions">
  47.         <div class="article-meta">
  48.           <a href="profile.html">
  49.             <img src="http://i.imgur.com/Qr71crq.jpg" />
  50.           </a>
  51.           <div class="info">
  52.             <a
  53.               class="author"
  54.               href
  55.             >Eric Simons</a>
  56.             <span class="date">January 20th</span>
  57.           </div>
  59.           <button class="btn btn-sm btn-outline-secondary">
  60.             <i class="ion-plus-round"></i>
  61.             &nbsp;
  62.             Follow Eric Simons
  63.           </button>
  64.           &nbsp;
  65.           <button class="btn btn-sm btn-outline-primary">
  66.             <i class="ion-heart"></i>
  67.             &nbsp;
  68.             Favorite Post
  69.             <span class="counter">(29)</span>
  70.           </button>
  71.         </div>
  72.       </div>
  74.       <div class="row">
  75.         <div class="col-xs-12 col-md-8 offset-md-2">
  76.           <form class="card comment-form">
  77.             <div class="card-block">
  78.               <textarea
  79.                 class="form-control"
  80.                 placeholder="Write a comment..."
  81.                 rows="3"
  82.               ></textarea>
  83.             </div>
  84.             <div class="card-footer">
  85.               <img
  86.                 class="comment-author-img"
  87.                 src="http://i.imgur.com/Qr71crq.jpg"
  88.               />
  89.               <button class="btn btn-sm btn-primary">Post Comment</button>
  90.             </div>
  91.           </form>
  93.           <div class="card">
  94.             <div class="card-block">
  95.               <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  96.             </div>
  97.             <div class="card-footer">
  98.               <a
  99.                 class="comment-author"
  100.                 href
  101.               >
  102.                 <img
  103.                   class="comment-author-img"
  104.                   src="http://i.imgur.com/Qr71crq.jpg"
  105.                 />
  106.               </a>
  107.               &nbsp;
  108.               <a
  109.                 class="comment-author"
  110.                 href
  111.               >Jacob Schmidt</a>
  112.               <span class="date-posted">Dec 29th</span>
  113.             </div>
  114.           </div>
  116.           <div class="card">
  117.             <div class="card-block">
  118.               <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  119.             </div>
  120.             <div class="card-footer">
  121.               <a
  122.                 class="comment-author"
  123.                 href
  124.               >
  125.                 <img
  126.                   class="comment-author-img"
  127.                   src="http://i.imgur.com/Qr71crq.jpg"
  128.                 />
  129.               </a>
  130.               &nbsp;
  131.               <a
  132.                 class="comment-author"
  133.                 href
  134.               >Jacob Schmidt</a>
  135.               <span class="date-posted">Dec 29th</span>
  136.               <span class="mod-options">
  137.                 <i class="ion-edit"></i>
  138.                 <i class="ion-trash-a"></i>
  139.               </span>
  140.             </div>
  141.           </div>
  142.         </div>
  143.       </div>
  144.     </div>
  145.   </div>
  146. </template>

导航链接高亮

  1. module.exports = {
  2.   router: {
  3.     linkActiveClass: 'active', // 用于精准激活的 RouterLink 的默认类，这里指定激活的link 类是 active
  4.   }
  5. }

exact

<router-link>标签的 exact 属性，用来指示“是否激活”默认类名的依据是包含匹配。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。
按照这个规则，每个路由都会激活 ！想要链接使用“精确匹配模式”，则使用 exact 属性。

封装请求模块

新建 utils 文件夹，在文件夹新建request.js，封装 axios 模块。

  1. /**
  2.  * 基于 axios 封装的请求模块
  3.  */
  5. import axios from 'axios'
  7. const requset = axios.create({
  8.   baseURL: 'https://api.realworld.io/api',
  9. })
  11. export default requset

基础登录功能

api

新建 api 文件夹，在文件夹新建user.js，这里封装了用户登录/注册的接口。

  1. import requset from "../utils/request"
  3. export const login = data => {
  4.   return requset({
  5.     method: 'POST',
  6.     url: '/users/login',
  7.     data
  8.   })
  9. }
  11. export const register = data => {
  12.   return requset({
  13.     method: 'POST',
  14.     url: '/users',
  15.     data
  16.   })
  17. }

登录/注册的组件要进行修改。输入框加入表单验证，处理按钮点击事件，登录和注册的功能分开，通过 api 请求登录数据，捕获异常，登录成功后跳转到首页。

  1. <template>
  2.   <div class="auth-page">
  3.     <div class="container page">
  4.       <div class="row">
  5.         <div class="col-md-6 offset-md-3 col-xs-12">
  6.           <h1 class="text-xs-center">{{ isLogin ? 'Sign in' : 'Sign up'}}</h1>
  7.           <p class="text-xs-center">
  8.             <!-- <a href>Have an account?</a> -->
  9.             <nuxt-link
  10.               to="/register"
  11.               v-if="isLogin"
  12.             >Need an account?</nuxt-link>
  13.             <nuxt-link
  14.               to="/login"
  15.               v-else
  16.             >Have an account?</nuxt-link>
  17.           </p>
  19.           <ul class="error-messages">
  20.             <template v-for="(messages, field) in errors">
  21.               <li
  22.                 :key="index"
  23.                 v-for="(message, index) in messages"
  24.               >{{ field }}{{ message }}</li>
  25.             </template>
  26.           </ul>
  28.           <form @submit.prevent="onSubmit">
  29.             <fieldset
  30.               class="form-group"
  31.               v-if="!isLogin"
  32.             >
  33.               <input
  34.                 class="form-control form-control-lg"
  35.                 placeholder="Your Name"
  36.                 type="text"
  37.                 v-model="user.username"
  38.               />
  39.             </fieldset>
  40.             <fieldset class="form-group">
  41.               <input
  42.                 class="form-control form-control-lg"
  43.                 placeholder="Email"
  44.                 required
  45.                 type="email"
  46.                 v-model="user.email"
  47.               />
  48.             </fieldset>
  49.             <fieldset class="form-group">
  50.               <input
  51.                 class="form-control form-control-lg"
  52.                 minlength="8"
  53.                 placeholder="Password"
  54.                 required
  55.                 type="password"
  56.                 v-model="user.password"
  57.               />
  58.             </fieldset>
  59.             <button class="btn btn-lg btn-primary pull-xs-right">{{ isLogin ? 'Sign in' : 'Sign up'}}</button>
  60.           </form>
  61.         </div>
  62.       </div>
  63.     </div>
  64.   </div>
  65. </template>
  67. <script>
  68. import { login, register } from '@/api/user'
  69. export default {
  70.   name: 'LoginIndex',
  71.   computed: {
  72.     isLogin() {
  73.       return this.$route.name === 'login'
  74.     }
  75.   },
  77.   data() {
  78.     return {
  79.       user: {
  80.         username: '',
  81.         email: '',
  82.         password: ''
  83.       },
  84.       errors: {}
  85.     }
  86.   },
  88.   methods: {
  89.     async onSubmit() {
  90.       try {
  91.         const { data } = this.isLogin ?
  92.           await login({
  93.             user: this.user
  94.           }) :
  95.           await register({
  96.             user: this.user
  97.           })
  99.         console.log(data)
  100.         this.$router.push('/')
  101.       } catch (err) {
  102.         this.errors = err.response.data.errors
  103.       }
  105.     }
  106.   },
  107. }
  108. </script>
  110. <style scoped>
  111. </style>

数据持久化

由于服务端和客户端都需要验证用户信息，所以这里通过操作 cookie 来实现。
新建 store 文件夹，它的功能相当于 Vuex，新建index.js。

  1. const cookieparser = process.server ? require('cookieparser') : undefined
  3. export const state = () => {
  4.   return {
  5.     user: null
  6.   }
  7. }
  9. export const mutations = {
  10.   setUser (state, data) {
  11.     state.user = data
  12.   }
  13. }
  15. export const actions = {
  16.   nuxtServerInit ({ commit }, { req }) {
  17.     let user = null
  18.     if (req.headers.cookie) {
  19.       const parsed = cookieparser.parse(req.headers.cookie)
  20.       try {
  21.         user = JSON.parse(parsed.user)
  22.       } catch (err) {
  23.         // No valid cookie found
  24.       }
  25.     }
  26.     commit('setUser', user)
  27.   }
  28. }

登录按钮事件修改：

  1. // 仅在客户端加载 js-cookie
  2. const Cookie = process.client ? require('js-cookie') : undefined
  4. async onSubmit() {
  5.       try {
  6.         const { data } = this.isLogin ?
  7.           await login({
  8.             user: this.user
  9.           }) :
  10.           await register({
  11.             user: this.user
  12.           })
  14.         this.$store.commit('setUser', data.user)
  15.         Cookie.set('user', data.user)
  16.         this.$router.push('/')
  17.       } catch (err) {
  18.         this.errors = err.response.data.errors
  19.       }
  21.     }

页面访问权限

一些页面在未登录的状态是不应该被允许访问到的。NuxtJS 通过中间件来实现路由拦截。
新建middleware文件夹，新建一个 js 文件，导出一个函数，该函数接收一个上下文对象作为参数。
写一个未登录就跳到登录页面的中间件authenticated.js：

  1. export default function ({ store, redirect }) {
  2.   if (!store.state.user) {
  3.     return redirect('/login')
  4.   }
  5. }

在页面组件中配置 middleware 属性，和中间件的文件名一致，就可以开启拦截。

  1. <script>
  2. export default {
  3.   name: 'EditorIndex',
  4.   middleware: 'authenticated'
  5. }
  6. </script>

登录/注册页面在登录之后就不能再被访问到。
写一个登录了就跳转到首页的中间件：

  1. export default function ({ store, redirect }) {
  2.   if (store.state.user) {
  3.     return redirect('/')
  4.   }
  5. }

首页

获取公共文章列表

封装 api：

  1. import request from '../utils/request'
  3. export const getArticles = params => {
  4.   return request({
  5.     method: 'GET',
  6.     url: '/articles',
  7.     params
  8.   })
  9. }

home 组件文章部分：

  1. <template>
  2.     <!-- 文章列表部分 -->
  3.     <div
  4.     :key="article.slug"
  5.     class="article-preview"
  6.     v-for="article in articles"
  7.   >
  8.     <div class="article-meta">
  9.       <nuxt-link :to="{ name: 'profile', params: { username: article.author.username }}">
  10.         <img :src="article.author.image" />
  11.       </nuxt-link>
  12.       <div class="info">
  13.         <nuxt-link
  14.           :to="{ name: 'profile', params: { username: article.author.username }}"
  15.           class="author"
  16.         >{{ article.author.username }}</nuxt-link>
  17.         <span class="date">{{ article.createdAt }}</span>
  18.       </div>
  19.       <button
  20.         :class="{
  21.         active: article.favorited
  22.       }"
  23.         class="btn btn-outline-primary btn-sm pull-xs-right"
  24.       >
  25.         <i class="ion-heart"></i>
  26.         {{ article.favoritesCount }}
  27.       </button>
  28.     </div>
  29.     <nuxt-link
  30.       :to="{
  31.         name: 'article',
  32.         params: {
  33.           slug: article.slug
  34.         }
  35.       }"
  36.       class="preview-link"
  37.     >
  38.       <h1>{{ article.title }}</h1>
  39.       <p>{{ article.description}}</p>
  40.       <span>Read more...</span>
  41.     </nuxt-link>
  42.   </div>
  43. </template>

分页

  1. <script>
  2. import { getArticles } from '@/api/article'
  3. export default {
  4.   name: 'HomeIndex',
  5.   async asyncData({ query }) {
  6.     const page = Number.parseInt(query.page || 1)
  7.     const limit = 1
  8.     const { data } = await getArticles({
  9.       limit,
  10.       offset: (page - 1) * limit,
  11.     })
  13.     return {
  14.       articles: data.articles, // 文章列表
  15.       articlesCount: data.articlesCount, // 文章总数
  16.       limit, // 每页大小
  17.       page, // 页码
  18.     }
  19.   },
  20.   watchQuery: ['page'],
  21.   computed: {
  22.     totalPage() {
  23.       return Math.ceil(this.articlesCount / this.limit)
  24.     }
  25.   },
  26. }
  27. </script>

home 组件分页部分：

  1. <template>
  2.   <div>
  3.     <!-- 分页列表 -->
  4.     <nav>
  5.       <ul class="pagination">
  6.         <li
  7.           :class="{
  8.             active: item === page
  9.           }"
  10.           :key="item"
  11.           class="page-item"
  12.           v-for="item in totalPage"
  13.         >
  14.           <nuxt-link
  15.             :to="{
  16.               name: 'home',
  17.               query: {
  18.                 page: item,
  19.               }
  20.             }"
  21.             class="page-link"
  22.           >{{ item }}</nuxt-link>
  23.         </li>
  24.       </ul>
  25.     </nav>
  26.     <!-- /分页列表 --> 
  27.   </div>
  28. </template>

标签

获取标签列表 api：

  1. import request from '../utils/request'
  3. export const getTags = params => {
  4.   return request({
  5.     method: 'GET',
  6.     url: '/tags',
  7.     params
  8.   })
  9. }

异步获取数据重构：

  1. <script>
  2. export default {
  3.   name: 'HomeIndex',
  4.   async asyncData({ query }) {
  5.     const page = Number.parseInt(query.page || 1)
  6.     const limit = 1
  7.     const tag = query.tag
  9.     const [articleRes, tagRes] = await Promise.all([
  10.       getArticles({
  11.         limit,
  12.         offset: (page - 1) * limit,
  13.         tag
  14.       }),
  15.       getTags()
  16.     ])
  18.     const { articles, articlesCount } = articleRes.data
  19.     const { tags } = tagRes.data
  21.     return {
  22.       articles, // 文章列表
  23.       articlesCount, // 文章总数
  24.       tags, // 标签列表
  25.       limit, // 每页大小
  26.       page, // 页码
  27.       tag,
  28.     }
  29.   },
  30.   watchQuery: ['page', 'tag'],
  31.   computed: {
  32.     totalPage() {
  33.       return Math.ceil(this.articlesCount / this.limit)
  34.     }
  35.   },
  36. }
  37. </script>

home 组件标签部分：

  1. <template>
  2. <div class="col-md-3">
  3.   <div class="sidebar">
  4.     <p>Popular Tags</p>
  6.     <div class="tag-list">
  7.       <nuxt-link
  8.         :key="tag"
  9.         :to="{
  10.           name: 'home',
  11.           query: {
  12.             tag: tag,
  13.           }
  14.         }"
  15.         class="tag-pill tag-default"
  16.         v-for="tag in tags"
  17.       >{{ tag }}</nuxt-link>
  18.     </div>
  19.   </div>
  20. </div>
  21. </template>

导航栏

导航栏最多有三个标签页，只有登录状态下显示的Your Feed，一直显示的Global Feed，还有点击标签产生的标签页。
home 组件导航栏部分：

  1. <ul class="nav nav-pills outline-active">
  2.   <li class="nav-item">
  3.     <nuxt-link
  4.       :class="{
  5.         active: tab === 'your_feed'
  6.       }"
  7.       :to="{
  8.         name: 'home',
  9.         query: {
  10.           tab: 'your_feed'
  11.         }
  12.       }"
  13.       class="nav-link"
  14.       exact
  15.       v-if="user"
  16.       >Your Feed</nuxt-link
  17.     >
  18.   </li>
  19.   <li class="nav-item">
  20.     <nuxt-link
  21.       :class="{
  22.         active: tab === 'global_feed'
  23.       }"
  24.       :to="{
  25.         name: 'home',
  26.         query: {
  27.           tab: 'global_feed'
  28.         }
  29.       }"
  30.       class="nav-link"
  31.       exact
  32.       >Global Feed</nuxt-link
  33.     >
  34.   </li>
  36.   <li class="nav-item" v-if="tag">
  37.     <nuxt-link
  38.       :class="{
  39.         active: tab === 'tag'
  40.       }"
  41.       :to="{
  42.         name: 'home',
  43.         query: {
  44.           tab: 'tag',
  45.           tag: tag
  46.         }
  47.       }"
  48.       class="nav-link"
  49.       >{{ '#' + tag }}</nuxt-link
  50.     >
  51.   </li>
  52. </ul>

Token

一些接口需要获取用户信息。所以最好统一给所有接口的请求头设置 Token。

NuxtJS 允许在运行应用程序前执行 js 插件，这在需要使用自己的库或第三方模块时特别有用。
一个典型的例子，使用 axios 发送请求。

  1. <template>
  2.   <h1>{{ title }}</h1>
  3. </template>
  5. <script>
  6.   import axios from 'axios'
  8.   export default {
  9.     async asyncData({ params }) {
  10.       let { data } = await axios.get(`https://my-api/posts/${params.id}`)
  11.       return { title: data.title }
  12.     }
  13.   }
  14. </script>

在独立的 js 模块文件中，插件必须作为默认导出成员导出。并且需要在nuxt.config.js的plugins数组选项中声明。
NuxtJS 会为插件注入 context，从 context 中可以解构出 route、store、params、query 等经常需要用到的数据。
基于 NuxtJS 的插件机制和 axios 的请求拦截器，可以实现把用户的 token 设置到请求头。
把案例的请求模块request.js放到plugins文件夹下，从注入插件的 context 对象解构出 store，获取到 user。

  1. /**
  2.  * 基于 axios 封装的请求模块
  3.  */
  5. import axios from 'axios'
  7. // 创建请求对象
  8. export const request = axios.create({
  9.   baseURL: 'https://conduit.productionready.io'
  10. })
  12. // 通过插件机制获取到上下文对象（query、params、req、res、app、store...）
  13. // 插件导出函数必须作为 default 成员
  14. export default ({ store }) => {
  16.   // 请求拦截器
  17.   // Add a request interceptor
  18.   // 任何请求都要经过请求拦截器
  19.   // 我们可以在请求拦截器中做一些公共的业务处理,例如统一设置 token
  20.   request.interceptors.request.use(function (config) {
  21.     // Do something before request is sent
  22.     // 请求就会经过这里
  23.     const { user } = store.state
  25.     if (user && user.token) {
  26.       config.headers.Authorization = `Token ${user.token}`
  27.     }
  29.     // 返回 config 请求配置对象
  30.     return config
  31.   }, function (error) {
  32.     // 如果请求失败(此时请求还没有发出去)就会进入这里
  33.     // Do something with request error
  34.     return Promise.reject(error)
  35.   })
  36. }

nuxt.config.js 声明插件：

  1. module.exports = {
  2.   plugins: [
  3.     '~/plugins/request.js'
  4.   ]
  5. }

由于request.js默认导出的是插件函数，所有之前导入request的地方需要把request解构出来。当导入request.js的时候，插件函数会自动执行。

  1. import { request } from '../plugins/request'

日期格式化

日期格式化有多种方式，这里通过 NuxtJS 插件和 Vue 的过滤器来实现。
安装dayjs模块，新建一个插件文件，导入Vue和dayjs。

  1. import Vue from 'vue'
  2. import dayjs from 'dayjs'
  4. Vue.filter('date', (value, format = 'YYYY-MM-DD HH:mm:ss') => {
  5.   return dayjs(value).format(format)
  6. })

在nuxt.config.js中声明插件。

文章发表时间格式化：

  1. // 过滤器用法：{{ 表达式 | 过滤器 }}
  2. <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>

点赞功能

点赞功能实现点击一次心心点赞，再点一次取消点赞。而且把点赞请求传给服务器期间，不允许再点击心心。

  1. <button
  2.   :class="{
  3.     active: article.favorited
  4.   }"
  5.   :disabled="article.favoriteDisabled"
  6.   class="btn btn-outline-primary btn-sm pull-xs-right"
  7.   @click="onFavorite(article)"
  8. >
  9.   <i class="ion-heart"></i>
  10.   {{ article.favoritesCount }}
  11. </button>
  13. <script>
  14.   articles.forEach(article => {
  15.       article.favoriteDisabled = false
  16.     })
  17.   async onFavorite (article) {
  18.       article.favoriteDisabled = true
  19.       if (article.favorited) {
  20.         await deleteFavorite(article.slug)
  21.         article.favorited = false
  22.         article.favoritesCount -= 1
  23.       } else {
  24.         await addFavorite(article.slug)
  25.         article.favorited = true
  26.         article.favoritesCount += 1
  27.       }
  28.       article.favoriteDisabled = false
  29.     }
  30. </script>

文章详情页

文章详情页最重要的几个步骤：获取文章的详情展示到页面，把文章的 markdown 形式的内容转成 html，设置页面 meta 优化 seo。

  1. <template>
  2.   <div class="article-page">
  3.     <div class="banner">
  4.       <div class="container" v-if="article">
  5.         <h1>{{ article.title }}</h1>
  7.         <article-meta v-if="article" :article="article"></article-meta>
  8.       </div>
  9.     </div>
  11.     <div class="container page" v-if="article">
  12.       <div class="row article-content">
  13.         <div
  14.           class="col-md-12"
  15.           v-html="article.body"
  16.         ></div>
  17.       </div>
  19.       <hr />
  21.       <div class="article-actions" v-if="article">
  22.         <article-meta :article="article"></article-meta>
  23.       </div>
  25.       <article-comment v-if="article" :article="article"></article-comment>
  26.     </div>
  27.   </div>
  28. </template>
  30. <script>
  31. import { getArticle } from '@/api/article'
  32. import Markdownit from "markdown-it"
  33. import ArticleMeta from './components/article-meta.vue'
  34. import ArticleComment from './components/article-comment.vue'
  35. export default {
  36.   name: 'ArticleIndex',
  37.   components: {
  38.     ArticleMeta,
  39.     ArticleComment,
  40.   },
  41.   async asyncData({ params }) {
  42.     try {
  43.       const { data } = await getArticle(params.slug)
  44.       const { article } = data
  45.       const md = new Markdownit()
  46.       article.body = md.render(article.body)
  47.       return {
  48.         article: article
  49.       }
  50.     } catch (error) {
  52.       return {
  53.         article: null
  54.       }
  55.     }
  56.   },
  57.   head() {
  58.     return {
  59.       title: `${this.article ? this.article.title + '-' : ''}RealWord`,
  60.       meta: [
  61.         { 
  62.           hid: 'description',
  63.           name: 'description',
  64.           content: this.article ? this.article.description : ''
  65.         }
  66.       ]
  67.     }
  68.   }
  69. }
  70. </script>
  72. <style scoped>
  73. </style>

自动部署

使用 Github Actions 来实现项目在提交到 GitHub 仓库后自动打包，部署到服务器。

生成 token

打开个人 settings，选择 Developer settings -> Personal access tokens，点击Generate new token，选择 token，输入信息，选择 token 的使用期限，使用范围。
image.png

Actions secrets

打开项目仓库，选择仓库的 Settings，点击 Secrets -> Actions，生成一些仓库秘密，包括服务器地址，远程端口，登录的用户密码，以及生成的 token。
image.png

配置脚本

在项目根目录下，新建 ./github/workflows/main.yml 文件。

  1. name: Publish And Deploy Demo
  2. on:
  3.   push:
  4.     tags:
  5.       - 'v*'
  7. jobs:
  8.   build-and-deploy:
  9.     runs-on: ubuntu-latest
  10.     steps:
  12.     # 下载源码
  13.     - name: Checkout
  14.       uses: actions/checkout@master
  16.     # 打包构建
  17.     - name: Build
  18.       uses: actions/setup-node@master
  19.     - run: npm install
  20.     - run: npm run build
  21.     - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json
  23.     # 发布 Release
  24.     - name: Create Release
  25.       id: create_release
  26.       uses: actions/create-release@master
  27.       env:
  28.         GITHUB_TOKEN: ${{ secrets.token }}
  29.       with:
  30.         tag_name: ${{ github.ref }}
  31.         release_name: Release ${{ github.ref }}
  32.         draft: false
  33.         prerelease: false
  35.     # 上传构建结果到 Release
  36.     - name: Upload Release Asset
  37.       id: upload-release-asset
  38.       uses: actions/upload-release-asset@master
  39.       env:
  40.         GITHUB_TOKEN: ${{ secrets.token }}
  41.       with:
  42.         upload_url: ${{ steps.create_release.outputs.upload_url }}
  43.         asset_path: ./release.tgz
  44.         asset_name: release.tgz
  45.         asset_content_type: application/x-tgz
  47.     # 部署到服务器 
  48.     - name: Deploy
  49.       uses: appleboy/ssh-action@master
  50.       with:
  51.         host: ${{ secrets.HOST }}
  52.         username: ${{ secrets.USERNAME }}
  53.         password: ${{ secrets.PASSWORD }}
  54.         port: ${{ secrets.PORT }}
  55.         script: |
  56.           cd /root/realworld-nuxtjs
  57.           wget https://github.com/yanlinchan/realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
  58.           tar zxvf release.tgz
  59.           npm install --production
  60.           pm2 reload pm2.config.json

推送标签

上面的文件中，编写了一个推送以 v 开头的标签到 GitHub 仓库，就会触发自动部署的任务。
所以在本地先用git tag创建一个标签，比如git tag v0.1.0，之后把这个标签推送到 GitHub，git push origin v0.1.0，就会触发 GitHub 自动部署到服务器的任务。
image.png