爱玲姐姐

大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）

NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和PM2部署）

文章内容输出来源：大前端高薪训练营

一、案例项目realworld介绍

1. 案例项目介绍

案例名称：RealWorld

这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。

GitHub仓库：https://github.com/gothinkster/realworld

在线实例：https://demo.realworld.io/

2. 案例相关资源

页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md
接口文档：https://github.com/gothinkster/realworld/tree/master/api

3. 学习前提

Vue.js使用经验
Nuxt.js基础
Node.js、webpack相关使用经验

4. 学习收获

掌握使用Nuxt.js开发同构渲染应用
增强Vue.js实践能力
掌握同构渲染应用中常见的功能处理
- 用户状态管理
- 页面访问权限处理
- SEO优化
掌握同构渲染应用的发布与部署

二、项目初始化

1. 创建项目

mkdir realworld-nuxtjs
yarn init -y
yarn add nuxt
配置启动脚本
创建pages目录，配置初始页面

2. 导入样式资源

Real world的仓库里提供了样式文件：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md


    <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link 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" rel="stylesheet" type="text/css">
    
    <link rel="stylesheet" href="//demo.productionready.io/main.css">

将这三个link放到我们项目中的app.html模板文件中，这个app.html要新建，默认模板就是Nuxt官网上的导航里的视图中的代码：


<html {
      {
       HTML_ATTRS }}>
  <head {
      {
       HEAD_ATTRS }}>
    {
    { HEAD }}
  head>
  <body {
      {
       BODY_ATTRS }}>
    {
    { APP }}
  body>
html>

把三个link放到head标签里，由于ionicons的CDN地址在国外，打开速度较慢，又包含字体文件，无法直接下载到本地，所以我们去一个国内CDN网站上找到它来使用。

国内CDN网站：https://www.jsdelivr.com/

搜索ionicons，选择我们需要的版本的css的min版本，复制CDN链接，替换到link中

第二个link的CDN国内支持访问，就不用本地化了。

第三个link的CDN也是在国外，需要本地化，然而它不含字体文件，所以可以直接另存到本地，我们另存到了static/index.css

最终app.html就是这样：


<html {
      {
       HTML_ATTRS }}>
  <head {
      {
       HEAD_ATTRS }}>
    {
    { HEAD }}
    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link 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" rel="stylesheet" type="text/css">
    
    <link rel="stylesheet" href="/index.css">
  head>
  <body {
      {
       BODY_ATTRS }}>
    {
    { APP }}
  body>
html>

3. 布局组件

重写路由表

nuxt.config.js

module.exports = {
     
  router: {
     
    // 自定义路由表规则
    extendRoutes(routes, resolve) {
     
      // 清除Nuxt.js基于pages目录生成的路由表规则
      routes.splice(0)

      routes.push(...[
        {
     
          path: '/',
          component: resolve(__dirname, 'pages/layout'),
          children: [
            {
     
              path: '', // 默认子路由
              component: resolve(__dirname, 'pages/Home')
            }
          ]
        }
      ])
    }
  }
}

Layout/index.vue

将模板代码中的导航和页脚代码放到layout/index.vue里面，导航和页脚之间放子路由组件

路由表中的layout组件的默认子组件是HomePage，html部分的代码来自于模板代码中的home部分。代码如下

home/index.vue

然后重启项目，访问项目的根路径，就是Layout组件

4. 导入登录注册页面

将仓库中的登录/注册模板代码拷贝到pages/login/index.vue中，登录和注册共用一个页面，通过计算属性来判断当前是登录还是注册页面，进而进行不同的文字渲染。

但是配置两个不同的路由，在nuxt.config.js中的layout路由的children数组中再添加两个子路由：

{
     
  path: '/login',
  name: 'login',
  component: resolve(__dirname, 'pages/login')
},
{
     
  path: '/register',
  name: 'register',
  component: resolve(__dirname, 'pages/login')
}

页面如下：

5. 导入剩余页面

个人简介profile、设置settings、文章新增修改页editor、文章详情页article

6. 处理顶部导航链接

将a标签替换成nuxt-link标签，href属性替换成to属性

7. 处理导航链接的高亮

给nuxt.config.js的router对象增加linkActiveClass: 'active'属性

然后删掉导航链接中的Home链接写死的active类，再增加exact属性，表示只有精确匹配到Home的路径时才高亮。

Home

8. 封装请求状态

安装axios: yarn add axios

封装请求：utils/request.js

/**
 * 基于axios封装的请求模块
 */

 import axios from 'axios'

 const request = axios.create({
     
   baseURL: 'https://conduit.productionready.io'
 })

// 请求拦截器

// 响应拦截器

 export default request

三、登录注册

1. 封装登录方法

api/user.js

import request from '@/utils/request'

// 用户登录
export const login = data => {
     
  return request({
     
    method: 'POST',
    url: '/api/users/login',
    data
  })
}

// 用户注册
export const register = data => {
     
  return request({
     
    method: 'POST',
    url: '/api/users',
    data
  })
}

pages/login/index.vue

import {
      login } from '@/api/user'
export default {
     
  name: 'LoginPage',
  computed: {
     
    isLogin () {
     
      return this.$route.name === 'login'
    }
  },
  data () {
     
    return {
     
      user: {
     
        email: '',
        password: ''
      }
    }
  },
  methods: {
     
    async onSubmit () {
     
      // 提交表单，请求登录
      const {
      data } = await login({
     
        user: this.user
      })
      console.log('data', data)
      // TODO 保存用户的登录状态

      // 跳转到首页
      this.$router.push('/')
    }
  }
}

2. 错误处理

data中存放errors: {} // 错误信息

改写onSubmit方法(try-catch捕获错误)：

async onSubmit () {
     
  try {
     
    // 提交表单，请求登录
    const {
      data } = await login({
     
      user: this.user
    })
    console.log('data', data)
    // TODO 保存用户的登录状态

    // 跳转到首页
    this.$router.push('/')
  }
  catch (err) {
     
    console.log('请求失败', err)
    console.dir(err)
    this.errors = err.response.data.errors
  }
}

遍历错误信息：

<ul class="error-messages">
  <template v-for="(messages, field) in errors">
    <li v-for="(message, index) in messages" :key="index">
      {
    { field }} {
    { messages}}
    li>
  template>
ul>

3. 注册

data () {
     
  return {
     
    user: {
     
      username: '',
      email: '',
      password: ''
    },
    errors: {
     } // 错误信息
  }
},
methods: {
     
    async onSubmit () {
     
      try {
     
        // 提交表单，请求登录
        const {
      data } = this.isLogin ? await login({
     
          user: this.user
        }): await register({
     
          user: this.user
        })
        console.log('data', data)
        // TODO 保存用户的登录状态

        // 跳转到首页
        this.$router.push('/')
      }
      catch (err) {
     
        console.log('请求失败', err)
        console.dir(err)
        this.errors = err.response.data.errors
      }
    }
}

4. 解析存储登录状态实现流程

https://zh.nuxtjs.org/examples/auth-external-jwt

https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/auth-jwt?from-embed=&file=/store/index.js

5. 将登录状态存储到容器中

store/index.js

// 为了防止在服务端渲染期间，运行的都是同一个实例，防止数据冲突，务必要把state定义成一个函数，返回数据对象
export const state = () => {
     
  return {
     
    user: null
  }
}

export const mutations = {
     
  setUser (state, data) {
     
    state.user = data
  }
}

export const actions = {
     

}

登录成功时保存用户状态到容器中，login/index.vue

// 保存用户的登录状态
this.$store.commit('setUser', data.user)

6. 登录状态持久化

将数据存到store中，只是在内存里，页面一刷新就没了。所以我们应该想办法将数据进行持久化。以前的做法是存到本地存储里，而现在在服务端也要渲染，所以不可以存在本地存储，否则服务端获取不到。正确的做法是存在cookie中，cookie可以随着http请求发送到服务端。

所以在login/index.vue页面中容器保存完登录状态后，还要将数据存储到Cookie中

// 仅在客户端加载js-cookie
const Cookie = process.client ? require('js-cookie'): undefined

// ...

// 保存用户的登录状态
this.$store.commit('setUser', data.user)

// 为了防止刷新页面数据丢失，数据需要持久化
Cookie.set('user', data.user)

在Store/index.js的actions中增加nuxtServerInit方法，nuxtServerInit是一个特殊的action方法，这个方法会在服务端渲染期间自动调用，作用是初始化容器数据，传递数据给客户端使用

export const actions = {
     
  nuxtServerInit ({
      commit }, {
      req }) {
     
    let user = null
    // 如果请求头中有个Cookie
    if (req.headers.cookie) {
     
      // 使用Cookieparser把cookie字符串转化为JavaScript对象
      const parsed = cookieparser.parse(req.headers.cookie)
      try {
     
        user = JSON.parse(parsed.user)
      } catch (err) {
     
        // No valid cookie found
      }
    }
    commit('setUser', user)
  }
}

7. 处理导航栏链接展示状态

Layout/index.vue页面中，增加计算属性user，通过user判断用户是否是登录状态：

import {
      mapState } from 'vuex'

export default {
     
  name: 'LayoutIndex',
  computed: {
     
    ...mapState(['user'])
  }
}

然后将导航栏上的用户名称那个li调到登录注册的li前面去，将最后两个li套在template里，将另3个li套在另外一个template里，如果用户登录了，则显示第一个template，如果未登录则显示后面两个登录注册所在的template

8. 处理页面访问权限 – 中间件

https://zh.nuxtjs.org/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称 (middleware/auth.js将成为 auth 中间件)。然后给要保护的页面增加middleware属性，值为中间件的文件名

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

定义两个中间件，

middleware/authenticated.js

export default function ({
      store, redirect }) {
     
  // 如果用户未登录，则跳转到登录页
  if (!store.state.user) {
     
    return redirect('/login')
  }
}

middleware/notAuthenticated.js

export default function ({
      store, redirect }) {
     
  // 如果用户已登录，则跳转到首页
  if (store.state.user) {
     
    return redirect('/')
  }
}

然后给settings/index.vue、profile/index.vue、editor/index页面增加属性middleware值为authenticated

export default {
     
  name: 'Settings',
  middleware: 'authenticated'
}

给login/index.vue页面增加属性middleware值为notAuthenticated

export default {
     
  name: 'LoginPage',
  middleware: 'notAuthenticated',
  // ...
}

四、首页

首页展示我的关注的文章和公共文章，所有文章可以选择标签，还可以分页。

1. 展示公共文章列表

Api/article.js

import request from '@/utils/request'

// 获取公共的文章列表
export const getArticles = params => {
     
  return request({
     
    method: 'GET',
    url: '/api/articles',
    params
  })
}

为了更好地优化SEO，将数据渲染放到服务端进行，数据初始化代码写到asyncData ()函数中，循环渲染文章信息。

home/index.vue

<div
  class="article-preview"
  v-for="article in articles"
  :key="article.slug"
>
  <div class="article-meta">
    <nuxt-link
      :to="{
        name: 'profile',
        params: {
          username: article.author.username
        }
      }"
      ><img :src="article.author.image"
    />nuxt-link>
    <div class="info">
      <nuxt-link
        :to="{
          name: 'profile',
          params: {
            username: article.author.username
          }
        }"
        class="author"
      >{
    {article.author.username}}nuxt-link>
      <span class="date">{
    {article.createAt}}span>
    div>
    <button class="btn btn-outline-primary btn-sm pull-xs-right" :class="{active: article.favorited}">
      <i class="ion-heart">i> {
    {article.favoritesCount}}
    button>
  div>
  <nuxt-link :to="{
    name: 'article',
    params: {
      slug: article.slug
    }
  }" class="preview-link">
    <h1>{
    {article.title}}h1>
    <p>{
    {article.description}}p>
    <span>Read more...span>
  nuxt-link>
div>

import {
      getArticles } from '@/api/article'
export default {
     
  name: "HomePage",
  async asyncData () {
     
    const {
      data } = await getArticles()
    return {
     
      articles: data.articles,
      articlesCount: data.articlesCount
    }
  }
};

2. 列表分页

分页参数的使用

async asyncData () {
       
  const page = 1
  const limit = 2
  const {
        data } = await getArticles({
       
    limit,
    offset: (page - 1) * limit
  })
  return {
       
    articles: data.articles,
    articlesCount: data.articlesCount
  }
}

limit表示每次展示多少条，offset表示跳过前多少条。所以当点击了页码为page时，offset则为(page - 1) * limit

分页处理


<nav>
  <ul class="pagination">
    <li class="page-item" :class="{active: item === page}" v-for="item in totalPage" :key="item">
      <nuxt-link class="page-link" :to="{
                                        name: 'home',
                                        query: {
                                        page: item
                                        }
                                        }">{
      {item}}nuxt-link>
    li>
  ul>

import {
        getArticles } from '@/api/article'
export default {
       
  name: "HomePage",
  watchQuery: ['page'],
  async asyncData ({
        query }) {
       
    const page = Number.parseInt(query.page || 1)
    const limit = 20
    const {
        data } = await getArticles({
       
      limit,
      offset: (page - 1) * limit
    })
    return {
       
      limit,
      page,
      articles: data.articles,
      articlesCount: data.articlesCount
    }
  },
  computed: {
       
    totalPage () {
       
      return Math.ceil(this.articlesCount / this.limit)
    }
  }
};

通过计算属性totalPage获取到总页面数。asyncData服务端渲染时通过URL上的query中的page参数获取到页码。

循环生成的页码标签使用nuxt-link标签，在客户端进行路由切换。而在前端路由变化之前，会执行asyncData方法更新数据。但是Nuxt中默认情况下query参数的变化不能引起asyncData代码的执行，所以我们可以通过使用watchQuery参数监听到路由的变化，触发asyncData的调用。

https://zh.nuxtjs.org/api/pages-watchquery

使用watchQuery属性可以监听参数字符串的更改。如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。为了提高性能，默认情况下禁用。

export default {
       
  watchQuery: ['page']
}

3. 文章便签列表

api/tag.js

import request from '@/utils/request'

// 获取文章标签列表
export const getTags = () => {
     
  return request({
     
    method: 'GET',
    url: '/api/tags',
  })
}

pages/home/index.vue

<div class="tag-list">
              <a
                href=""
                class="tag-pill tag-default"
                v-for="item in tags"
                :key="item"
              >{
    {item}}a>
            div>

import {
      getArticles } from '@/api/article'
import {
      getTags } from '@/api/tag'
export default {
     
  name: "HomePage",
  watchQuery: ['page'],
  async asyncData ({
      query }) {
     
    const page = Number.parseInt(query.page || 1)
    const limit = 20
    const {
      data } = await getArticles({
     
      limit,
      offset: (page - 1) * limit
    })
    const {
      data: tagData } = await getTags()
    return {
     
      limit,
      page,
      articles: data.articles,
      articlesCount: data.articlesCount,
      tags: tagData.tags
    }
  },
  computed: {
     
    totalPage () {
     
      return Math.ceil(this.articlesCount / this.limit)
    }
  }
};

4. 优化并行异步任务

将两个没有依赖关系的异步任务通过使用Promise.all并行执行，提高请求速度。并发执行的速度大于串行执行的速度。

import {
      getArticles } from '@/api/article'
import {
      getTags } from '@/api/tag'
export default {
     
  name: "HomePage",
  watchQuery: ['page'],
  async asyncData ({
      query }) {
     
    const page = Number.parseInt(query.page || 1)
    const limit = 20
    const [articleRes, tagRes] = await Promise.all([
      getArticles({
     
        limit,
        offset: (page - 1) * limit
      }),
      getTags()
    ])
    const {
      articles, articlesCount } = articleRes.data
    const {
      tags } = tagRes.data
    return {
     
      limit,
      page,
      articles,
      articlesCount,
      tags
    }
  },
  computed: {
     
    totalPage () {
     
      return Math.ceil(this.articlesCount / this.limit)
    }
  }
};

5. 处理标签列表链接和数据


<nav>
  <ul class="pagination">
    <li class="page-item" :class="{active: item === page}" v-for="item in totalPage" :key="item">
      <nuxt-link class="page-link" :to="{
                                        name: 'home',
                                        query: {
                                        page: item,
                                        tag: $route.query.tag
                                        }
                                        }">{
    {item}}nuxt-link>
    li>
  ul>
nav>

<div class="tag-list">
              <nuxt-link
                :to="{
                  name: 'home',
                  query: {
                    tag: item
                  }
                }"
                class="tag-pill tag-default"
                v-for="item in tags"
                :key="item"
              >{
    {item}}nuxt-link>
            div>

watchQuery: ['page', 'tag'],// 此处监听query中tag变化
  
// ...
  
 
getArticles({
     
    limit,
    offset: (page - 1) * limit,
    tag: query.tag, // 此处增加tag参数
  }),

6. 处理文章导航选项卡

<ul class="nav nav-pills outline-active">
  <li v-if="user" class="nav-item" :class="{active: tab === 'your_feed'}">
    <nuxt-link
               class="nav-link"
               :to="{
                    name: 'home',
                    query: {
                    tab: 'your_feed'
                    }
                    }"
               exact
               >Your Feednuxt-link>
  li>
  <li class="nav-item" :class="{active: tab === 'global_feed'}">
    <nuxt-link
               class="nav-link"
               :to="{
                    name: 'home'
                    }"
               exact
               >Global Feednuxt-link>
  li>
  <li v-if="tag" class="nav-item" :class="{active: tab === 'tag'}">
    <nuxt-link
               class="nav-link"
               :to="{
                    name: 'home',
                    query: {
                    tab: 'tag',
                    tag: tag
                    }
                    }"
               exact
               > # {
    { tag }}nuxt-link>
  li>
ul>

<div class="tag-list">
  <nuxt-link
             :to="{
                  name: 'home',
                  query: {
                  tag: item,
                  tab: 'tag'
                  }
                  }"
             class="tag-pill tag-default"
             v-for="item in tags"
             :key="item"
             >{
    {item}}nuxt-link>
div>

import {
      getArticles } from '@/api/article'
import {
      getTags } from '@/api/tag'
import {
      mapState } from 'vuex'
export default {
     
  name: "HomePage",
  watchQuery: ['page', 'tag', 'tab'], // 这里增加了tab的监听
  async asyncData ({
      query }) {
     
    const page = Number.parseInt(query.page || 1)
    const limit = 20
    const tab = query.tab || 'global_feed' // 将tab存到data里
    const tag = query.tag // 将tag存到data里
    const [articleRes, tagRes] = await Promise.all([
      getArticles({
     
        limit,
        offset: (page - 1) * limit,
        tag: query.tag
      }),
      getTags()
    ])
    const {
      articles, articlesCount } = articleRes.data
    const {
      tags } = tagRes.data
    return {
     
      limit,
      page,
      articles,
      articlesCount,
      tags,
      tab,
      tag
    }
  },
  computed: {
     
    totalPage () {
     
      return Math.ceil(this.articlesCount / this.limit)
    },
    ...mapState(['user']) // 用来判断用户是否登录
  }
};

7. 展示用户关注的文章列表

Api/article.js

// 获取用户关注的文章列表
export const getYourFeedArticles = params => {
     
  return request({
     
    headers: {
     
      // 添加用户身份，数据格式：Token空格Token数据
      Authorization: 'Token eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTA4NjU2LCJ1c2VybmFtZSI6ImppYWlsaW5nIiwiZXhwIjoxNjAyMDcyNDkyfQ.Uoz9baKbVzE8oDpLFzAsmhdIPqLnfDCLmEzU7A8Cfog'
    },
    method: 'GET',
    url: '/api/articles/feed',
    params
  })
}

pages/home/index.vue改写部分

const loadArticles = tab !== 'your_feed'
? getArticles
: getYourFeedArticles
const [articleRes, tagRes] = await Promise.all([
  loadArticles({
     
    limit,
    offset: (page - 1) * limit,
    tag: query.tag
  }),
  getTags()
])

8. 统一设置用户Token

axios请求拦截器：

https://github.com/axios/axios#interceptors

Nuxt中间件：

https://zh.nuxtjs.org/guide/plugins#%E6%B3%A8%E5%85%A5-context

新建文件plugins/request.js

/**
 * 基于axios封装的请求模块
 */

import axios from 'axios'

// 创建请求对象
export const request = axios.create({
     
  baseURL: 'https://conduit.productionready.io'
})

// 通过插件机制获取到上下文对象（query、params、req、res、app、store···）
// 插件导出函数必须作为default成员
export default ({
      store }) => {
     

  // 请求拦截器
  // Add a request interceptor
  // 任何请求都要经过请求拦截器
  // 我们可以在请求拦截器中做一些公共的业务处理，例如统一设置Token
  request.interceptors.request.use(function (config) {
     
    // Do something before request is sent
    // 请求就会经过这里
    const {
      user } = store.state
    if ( user && user.token)
    config.headers.Authorization = `Token ${
       user.token}`
    // 返回config请求配置对象
    return config;
  }, function (error) {
     
    // 如果请求失败（此时请求还没有发出去）就会进入这里
    // Do something with request error
    return Promise.reject(error);
  });
}

在Nuxt配置文件中注册插件：

Nuxt.config.js

module.exports = {
     
  // 注册插件
  plugins: [
    '~/plugins/request.js', // 波浪线开头表示从根路径触发
  ]
}

删除原本的utils/request.js文件

将原本api文件夹里的文件引用的utils/request.js文件全部改为plugins/request.js

9. 文章发布时间格式设置

Dayjs是一种更轻量级的日期插件，跟Moment的API用法相同，包含Moment最核心的功能。

Dayjs的GitHub仓库地址：https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md

在dayjs官网上查看日期格式：https://day.js.org/docs/en/display/format

安装：yarn add dayjs

新建文件plugins/dayjs.js

import Vue from 'vue'
import dayjs from 'dayjs'

// {
     { 表达式 | 过滤器 }}
Vue.filter('date', (value, format = 'YYYY-MM-DD HH:mm:ss') => {
     
  return dayjs(value).format(format)
})

去nuxt.config.js里面注册date过滤器插件

module.exports = {
     
  // ... 
  
	// 注册插件
  plugins: [
    '~/plugins/request.js', // 波浪线开头表示从根路径触发
    '~/plugins/dayjs.js',
  ]
}

对page/home/index.vue里面的日期使用过滤器

<span class="date">{
    {article.createdAt | date('MMM DD, YYYY')}}span>

10. 文章点赞

Api/article.js增加两个按需导出的方法，处理文章点赞和取消点赞功能

// 添加点赞
export const addFavorite = slug => {
     
  return request({
     
    method: 'POST',
    url: `/api/articles/${
       slug}/favorite`,
  })
}

// 取消点赞
export const deleteFavorite = slug => {
     
  return request({
     
    method: 'DELETE',
    url: `/api/articles/${
       slug}/favorite`,
  })
}

视图中的button按钮增加点击事件：

<button
        class="btn btn-outline-primary btn-sm pull-xs-right"
        :class="{active: article.favorited}"
        @click="onFavorite(article)"
        :disabled="article.favoriteDisabled"
        >
  <i class="ion-heart">i> {
    {article.favoritesCount}}
button>

在methods中实现onFavorite(article)函数

import {
      getArticles, getYourFeedArticles, addFavorite, deleteFavorite } from '@/api/article'

// 主动给article增加一个favoriteDisabled属性，用来控制用户无法频繁点击，避免因为网络原因导致视图和数据库的点赞数不一致。下面这句话写在asyncData方法的return之前。
articles.forEach(article => article.favoriteDisabled = false)

methods: {
     
  async onFavorite (article) {
     
    article.favoriteDisabled = true // 禁用点击
    if(article.favorited) {
     
      // 取消点赞
      await deleteFavorite(article.slug)
      article.favorited = false
      article.favoritesCount -= 1
    } else {
     
      // 添加点赞
      await addFavorite(article.slug)
      article.favorited = true
      article.favoritesCount += 1
    }
    article.favoriteDisabled = false // 允许点击
  }
}

五、文章详情

展示文章详情内容、关注作者、点赞和取消点赞、评论功能

1. 展示文章基本信息

在api/article.js中增加一个获取文章详情的方法

// 获取文章详情
export const getArticle = slug => {
     
  return request({
     
    method: 'GET',
    url: `/api/articles/${
       slug}`,
  })
}

pages/article/index.vue

import {
      getArticle } from '@/api/article'
export default {
     
  name: 'ArticleIndx',
  async asyncData ({
      params }) {
     
    const {
      data } = await getArticle(params.slug)
    return {
     
      article: data.article
    }
  }
}

<h1>{
    {article.title}}h1>

<div class="row article-content">
  <div class="col-md-12">
    {
    { article.body }}
  div>
div>

2. 文章详情 - markdown转HTML

可以使用slug为markdown-ddof1g的文章测试

先安装处理markdown的依赖markdown-it

yarn add markdown-it

然后new一个 MarkdownIt的实例，使用实例的render方法转化markdown为HTML

import MarkdownIt from 'markdown-it'
import {
      getArticle } from '@/api/article'
export default {
     
  name: 'ArticleIndx',
  async asyncData ({
      params }) {
     
    const {
      data } = await getArticle(params.slug)
    const {
      article } = data
    const md = new MarkdownIt()
    article.body = md.render(article.body)
    return {
     
      article: article
    }
  }
}

html文本要用v-html标签渲染

<div class="row article-content">
  <div class="col-md-12" v-html="article.body">
  div>
div>

3. 展示文章作者相关信息

Pages/article/components/article-meta.vue

<template>
  <div class="article-meta">
    <nuxt-link :to="{
      name: 'profile',
      params: {
        username: article.author.username
      }
    }"><img :src="article.author.image" />nuxt-link>
    <div class="info">
      <nuxt-link :to="{
      name: 'profile',
      params: {
        username: article.author.username
      }
    }" class="author">{
    {article.author.username}}nuxt-link>
      <span class="date">{
    {article.createdAt | date('MMM DD, YYYY')}}span>
    div>

    <button class="btn btn-sm btn-outline-secondary" :class="{active: article.author.following}">
      <i class="ion-plus-round">i>
       
      Follow Eric Simons <span class="counter">(10)span>
    button>
     
    <button class="btn btn-sm btn-outline-primary" :class="{active: article.favorited}">
      <i class="ion-heart">i>
       
      Favorite Post <span class="counter">({
    {article.favoritesCount}})span>
    button>
  div>
template>

<script>
export default {
      
  name: 'ArticleMeta',
  props: {
      
    article: {
      
      type: Object,
      required: true
    }
  }
}
script>

pages/article/index.vue

<ArticleMeta :article="article"/>

4. 设置页面meta的SEO优化

https://zh.nuxtjs.org/guide/views#html-%E5%A4%B4%E9%83%A8

https://zh.nuxtjs.org/guide/views#%E4%B8%AA%E6%80%A7%E5%8C%96%E7%89%B9%E5%AE%9A%E9%A1%B5%E9%9D%A2%E7%9A%84-meta-%E6%A0%87%E7%AD%BE

Nuxt 在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签。

注意：为了避免子组件中的 meta 标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为 meta 标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。

Pages/article/index.vue

head() {
     
    return {
     
      title: `${
       this.article.title} - RealWorld`,
      meta: [
        {
     
          hid: 'description',
          name: 'description',
          content: this.article.description
        }
      ]
    }
  }

5. 通过客户端渲染展示评论列表

Api/article.js里增加获取文章评论的方法

// 获取文章评论
export const getComments = slug => {
     
  return request({
     
    method: 'GET',
    url: `/api/articles/${
       slug}/comments`,
  })
}

pages/article/components/article-comment.vue

<template>
  <div>
    <form class="card comment-form">
      <div class="card-block">
        <textarea class="form-control" placeholder="Write a comment..." rows="3">textarea>
      div>
      <div class="card-footer">
        <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
        <button class="btn btn-sm btn-primary">
          Post Comment
        button>
      div>
    form>
    
    <div class="card" v-for="comment in comments" :key="comment.id">
      <div class="card-block">
        <p class="card-text">{
    {comment.body}}p>
      div>
      <div class="card-footer">
        <nuxt-link :to="{
          name: 'profile',
          params: {
            username: comment.author.username
          }
        }" class="comment-author">
          <img :src="comment.author.image" class="comment-author-img" />
        nuxt-link>
         
        <nuxt-link :to="{
          name: 'profile',
          params: {
            username: comment.author.username
          }
        }" class="comment-author">{
    {comment.author.username}}nuxt-link>
        <span class="date-posted">{
    {comment.createdAt | date('MMM DD, YYYY')}}span>
      div>
    div>

  div>
template>

<script>
import {
       getComments } from '@/api/article'
export default {
      
  name: 'ArticleComment',
  props: {
      
    article: {
      
      type: Object,
      required: true
    }
  },
  data () {
      
    return {
      
      // 文章列表
      comments: []
    }
  },
  async mounted () {
      
    // 不要求SEO，请求数据放到mounted里面，只走客户端渲染
    const {
       data } = await getComments(this.article.slug)
    this.comments = data.comments
  }
}
script>

pages/article/index.vue

<ArticleComment :article="article" />

6. 登录才能评论

pages/article/index.vue

<div class="col-xs-12 col-md-8 offset-md-2">
  <ArticleComment v-if="user" :article="article" />
  <ArticlelUnlogin v-else />
div>

import {
      mapState } from 'vuex'
import ArticleUnlogin from './components/article-unlogin'

export default {
     
  // ...
  components: {
     
    // ...
    ArticleUnlogin
  },
  // ...
  computed: {
     
    ...mapState(['user'])
  },
}

pages/article/components/article-unlogin.vue

<template>
  <div>
    <div class="col-xs-12 col-md-8 offset-md-2">
      <div show-authed="true" style="display: none;">
        <list-errors from="$ctrl.commentForm.errors" class="ng-isolate-scope"
          ><ul class="error-messages ng-hide" ng-show="$ctrl.errors">
            
          ul>
        list-errors>
        <form
          class="card comment-form ng-pristine ng-valid"
          ng-submit="$ctrl.addComment()"
        >
          <div class="card-block">
            <textarea
              class="form-control ng-pristine ng-untouched ng-valid ng-empty"
              placeholder="Write a comment..."
              rows="3"
              ng-model="$ctrl.commentForm.body"
            >
            textarea>
          div>
          <div class="card-footer">
            <img class="comment-author-img" />
            <button class="btn btn-sm btn-primary" type="submit">
              Post Comment
            button>
          div>
        form>
      div>

      <p show-authed="false" style="display: inherit;">
        <nuxt-link to="/login">Sign innuxt-link> or
        <nuxt-link to="/register">sign upnuxt-link> to add comments
        on this article.
      p>

    div>
  div>
template>

<script>
export default {
      
  name: "ArticleUnlogin",
};
script>

7. 发表评论

pages/article/components/article-comment.vue

<form class="card comment-form">
  <div class="card-block">
    <textarea class="form-control" placeholder="Write a comment..." rows="3" v-model="body">textarea>
  div>
  <div class="card-footer">
    <img :src="user.image" class="comment-author-img" />
    <button class="btn btn-sm btn-primary" @click.prevent="submitComment">
      Post Comment
    button>
  div>
form>

import {
      getComments, addComment } from '@/api/article'

export default {
     
  data () {
     
    return {
     
      // ...
      body: ''
    }
  },
  // ...
  methods: {
     
    async submitComment () {
     
      const {
      data } = await addComment(this.article.slug, this.body)
      this.comments.unshift(data.comment)
      this.body = ''
    }
  }
}

api/article.js

// 评论文章
export const addComment = (slug, body) => {
     
  return request({
     
    method: 'POST',
    url: `/api/articles/${
       slug}/comments`,
    data: {
     body}
  })
}

8. 添加文章

pages/editor/index.vue

<template>
  <div class="editor-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-10 offset-md-1 col-xs-12">
        <ul class="error-messages" v-if="errors">
          <div v-for="(value, field) in errors" :key="field" class="ng-scope">
            <li v-for="error in value" :key="error" class="ng-binding ng-scope">
              {
    {field}} {
    {error}}
            li>
          div>
        ul>
        <form>
          <fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control form-control-lg" placeholder="Article Title" v-model="article.title" required>
            fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control" placeholder="What's this article about?" v-model="article.description" required>
            fieldset>
            <fieldset class="form-group">
                <textarea v-model="article.body" class="form-control" rows="8" placeholder="Write your article (in markdown)" required>textarea>
            fieldset>
            <fieldset class="form-group">
                <input v-model="tagstr" v-on:keyup.enter="enterTag" type="text" class="form-control" placeholder="Enter tags">
                <div class="tag-list">
                  <span v-for="(tag, index) in article.tagList" :key="index" class="tag-default tag-pill">
                  <i class="ion-close-round" @click="removeTag(index)">i>
                  {
    {tag}}
                span>
                div>
            fieldset>
            <button @click="submitArticle" class="btn btn-lg pull-xs-right btn-primary" type="button">
                Publish Article
            button>
          fieldset>
        form>
      div>

    div>
  div>
div>
template>

<script>
import {
       createArticle } from '@/api/editor'

export default {
      
  name: 'EditorIndex',
  middleware: 'authenticated',
  data () {
      
    return {
      
      tagstr: '',
      errors: null,
      article: {
      
        title: '',
        description: '',
        body: '',
        tagList: []
      }
    }
  },
  methods: {
      
    enterTag () {
      
      this.article.tagList.push(this.tagstr)
      this.tagstr = ''
    },
    removeTag (index) {
      
      this.article.tagList.splice(index, 1)
    },
    async submitArticle () {
      
      try {
      
        const {
       data } = await createArticle(this.article)
        this.$router.push(`/article/${
        data.article.slug}`)
      } catch (e) {
      
        this.errors = e.response.data.errors
      }
    }
  }
}
script>

<style scoped>

style>

api/editor.js

import {
     request} from '@/plugins/request'

// 发表文章
export const createArticle = data => {
     
  return request({
     
    method: 'POST',
    url: '/api/articles',
    data
  })
}

9. 本人的文章详情页显示修改按钮和删除按钮

注意：修改文章的路由表里要配:slug,否则slug无法显示到路由上，slug后面要加问号，否则添加文章的页面无法访问了

nuxt.config.js

{
     
  path: '/editor/:slug?',
    name: 'editor',
      component: resolve(__dirname, 'pages/editor')
},

pages/article/components/article-meta.vue

<span v-if="!user">
      <button
        class="btn btn-sm btn-outline-secondary"
        :class="{ active: article.author.following }"
      >
        <i class="ion-plus-round">i>
          Follow Eric Simons <span class="counter">(10)span>
      button>
       
      <button
        class="btn btn-sm btn-outline-primary"
        :class="{ active: article.favorited }"
      >
        <i class="ion-heart">i>
          Favorite Post
        <span class="counter">({
    { article.favoritesCount }})span>
      button>
    span>
    <span v-else>
      <nuxt-link
        class="btn btn-outline-secondary btn-sm"
        :to="{
          name: 'editor',
          params: {
            slug: article.slug,
          },
        }"
      >
        <i class="ion-edit">i> Edit Article
      nuxt-link>

      <button
        class="btn btn-outline-danger btn-sm"
        :class="{ disabled: article.isDeleting }"
        @click="handleDelete(article)"
      >
        <i class="ion-trash-a">i> Delete Article
      button>
    span>

import {
      mapState } from "vuex"
import {
      deleteArticle } from '@/api/article'
export default {
     
  name: "ArticleMeta",
  props: {
     
    article: {
     
      type: Object,
      required: true,
    },
  },
  computed: {
     
    ...mapState(["user"]),
  },
  methods: {
     
    async handleDelete(article) {
     
      this.article.isDeleting = true
      await deleteArticle(article.slug)
      this.article.isDeleting = false
      this.$router.push('/')
    },
  },
};

api/article.js

// 删除文章
export const deleteArticle = slug => {
     
  return request({
     
    method: 'DELETE',
    url: `/api/articles/${
       slug}`,
  })
}

// 更新文章详情
export const updateArticle = (slug, data) => {
     
  return request({
     
    method: 'PUT',
    url: `/api/articles/${
       slug}`,
    data
  })
}

10. 修改文章与添加文章共用一个路由和页面

pages/editor/index.vue

import {
      createArticle, getArticle, updateArticle } from '@/api/article'

export default {
     
  name: 'EditorIndex',
  middleware: 'authenticated',
  data () {
     
    return {
     
      tagstr: '',
      errors: null,
      article: {
     
        title: '',
        description: '',
        body: '',
        tagList: []
      }
    }
  },
  async mounted () {
     
    const slug = this.$route.params.slug
    if (slug) {
     
      this.slug = slug
      const {
      data } = await getArticle(slug)
      this.article = data.article
    }
  },
  methods: {
     
    enterTag () {
     
      this.article.tagList.push(this.tagstr)
      this.tagstr = ''
    },
    removeTag (index) {
     
      this.article.tagList.splice(index, 1)
    },
    async submitArticle () {
     
      try {
     
        if (this.slug) {
     
          const {
      data } = await updateArticle(this.slug, {
     article: this.article})
          this.$router.push(`/article/${
       data.article.slug}`)
        }else {
     
          const {
      data } = await createArticle({
     
            article: this.article
          })
          this.$router.push(`/article/${
       data.article.slug}`)
        }
      } catch (e) {
     
        this.errors = e.response.data.errors
      }
    }
  }
}

11. 设置页修改个人资料

pages/settings/index.vue

<template>
  <div class="settings-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">Your Settingsh1>
        <ul class="error-messages">
          <template v-for="(messages, field) in errors">
            <li v-for="(message, index) in messages" :key="index">
              {
    { field }} {
    { messages}}
            li>
          template>
        ul>
        <form>
          <fieldset>
              <fieldset class="form-group">
                <input class="form-control" type="url" placeholder="URL of profile picture" v-model="user.image" required>
              fieldset>
              <fieldset class="form-group">
                <input class="form-control form-control-lg" type="text" placeholder="Your Name" v-model="user.username" required>
              fieldset>
              <fieldset class="form-group">
                <textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you" v-model="user.bio" required>textarea>
              fieldset>
              <fieldset class="form-group">
                <input class="form-control form-control-lg" type="email" placeholder="Email" v-model="user.email" required>
              fieldset>
              <fieldset class="form-group">
                <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password" required>
              fieldset>
              <button class="btn btn-lg btn-primary pull-xs-right" @click.prevent="handleSubmit">
                Update Settings
              button>
          fieldset>
        form>
        <hr/>
        <button class="btn btn-outline-danger" @click="logout">
          Or click here to logout.
        button>
      div>

    div>
  div>
div>
template>

<script>
const Cookie = process.client ? require('js-cookie'): undefined
import {
       updateUser } from '@/api/user'
import {
       mapState } from 'vuex'

export default {
      
  name: 'Settings',
  middleware: 'authenticated',
  data () {
      
    return {
      
      user: {
      
        bio: '',
        email: '',
        image: '',
        password: '',
        username: ''
      },
      errors: {
      } // 错误信息
    }
  },
  computed: {
      
    ...mapState({
      storeUser: 'user'})
  },
  
  mounted () {
      
    this.user.bio = this.storeUser.bio
    this.user.email = this.storeUser.email
    this.user.image = this.storeUser.image
    this.user.password = this.storeUser.password
    this.user.username = this.storeUser.username
  },

  methods: {
      
    async handleSubmit () {
      
      try {
      
        const {
       data } = await updateUser({
      
          user: this.user
        })

        console.log('data', data)

        // 更新用户的登录状态
        this.$store.commit('setUser', data.user)

        // 为了防止刷新页面数据丢失，数据需要持久化
        Cookie.set('user', data.user)

        this.$router.push(`/profile/${
        data.user.username}`)
      } catch (e) {
      
        this.errors = e.response.data.errors
      }
    },
    logout () {
      
      // 删除用户的登录状态
      this.$store.commit('setUser', null)

      // 删除数据持久化
      Cookie.set('user', null)
      
      this.$router.push('/')
    }
  }
}
script>

<style scoped>

style>

12. 用户个人主页

<template>
  <div class="profile-page">

  <div class="user-info">
    <div class="container">
      <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
          <img :src="profile.image" class="user-img" />
          <h4>{
    {profile.username}}h4>
          <p>
            {
    {profile.bio}}
          p>
          <button
            class="btn btn-sm btn-outline-secondary action-btn"
            :class="{ active: profile.following }"
            @click="onFollow(profile)"
          >
            <i class="ion-plus-round">i>
             
            Follow {
    {profile.username}} 
          button>
        div>

      div>
    div>
  div>

  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-10 offset-md-1">
        <div class="articles-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
              <nuxt-link
                class="nav-link" 
                exact
                :class="{active: tab === 'my'}"
                :to="{
                name: 'profile',
                params: {
                  profile: profile.username
                },
                query: {
                  tab: 'my'
                }
              }">My Articlesnuxt-link>
            li>
            <li class="nav-item">
              <nuxt-link
                class="nav-link"
                exact
                :class="{active: tab === 'favorited'}"
                :to="{
                  name: 'profile',
                  params: {
                    profile: profile.username
                  },
                  query: {
                    tab: 'favorited'
                  }
                }">Favorited Articlesnuxt-link>
            li>
          ul>
        div>

        <div class="article-preview" v-for="article in articles" :key="article.slug">
          <div class="article-meta">
            <nuxt-link :to="{
              name: 'profile',
              params: {
                username: article.author.username
              }
            }">
              <img :src="article.author.image" />
            nuxt-link>
            <div class="info">
              <nuxt-link
                :to="{
                  name: 'profile',
                  params: {
                    username: article.author.username
                  }
                }"
                class="author"
               >
                {
    {article.author.username}}
              nuxt-link>
              <span class="date">{
    { article.createdAt | date('MMM DD, YYYY') }}span>
            div>
            <button
                class="btn btn-outline-primary btn-sm pull-xs-right"
                :class="{active: article.favorited}"
                @click="onFavorite(article)"
                :disabled="article.favoriteDisabled"
              >
                <i class="ion-heart">i> {
    {article.favoritesCount}}
              button>
          div>
          <nuxt-link :to="{
            name: 'article',
            params: {
              slug: article.slug
            }
          }" class="preview-link">
            <h1>{
    {article.title}}h1>
            <p>{
    {article.description}}p>
            <span>Read more...span>
            <ul class="tag-list">
              <li class="tag-default tag-pill tag-outline" v-for="tag in article.tagList" :key="tag">
                {
    {tag}}
              li>
            ul>
          nuxt-link>
        div>
        
        <nav>
          <ul class="pagination">
            <li class="page-item" :class="{active: item === page}" v-for="item in totalPage" :key="item">
              <nuxt-link class="page-link"
                :to="{
                  name: 'profile',
                  params: {
                    username: profile.username
                  },
                  query: {
                    page: item,
                    tab
                  }
                }">{
    {item}}nuxt-link>
            li>
          ul>
        nav>
      div>
    div>
  div>

div>
template>

<script>
import {
       mapState } from 'vuex'
import {
       getProfiles } from '@/api/profile'
import {
       getArticles, deleteFavorite, addFavorite, deleteFollow, addFollow } from '@/api/article'
export default {
      
  name: 'UserProfile',
  watchQuery: ['tab', 'page'],
  async asyncData (context) {
      

    const {
       tab = 'my', page = 1 } = context.query
    const {
      username} = context.params

    const limit = 5
    const offset = ( page - 1 ) * limit

    const articleParams = tab === 'my'
    ? {
       author: username }
    : {
       favorited: username }

    articleParams.limit = limit
    articleParams.offset = offset

    const [profileRes, articlesRes] = await Promise.all([
      getProfiles(username), getArticles(articleParams)
    ])
    const {
       profile } = profileRes.data
    const {
       articles, articlesCount } = articlesRes.data
    articles.forEach(article => article.favoriteDisabled = false)

    return {
      
      tab,
      limit,
      page,
      profile,
      articles,
      articlesCount,
    }
  },
  computed: {
      
    ...mapState(['user']),
    totalPage () {
      
      return Math.ceil(this.articlesCount / this.limit)
    },
  },
  methods: {
      
    async onFavorite (article) {
      
      if (!this.user ) return this.$router.push('/login')
      article.favoriteDisabled = true // 禁用点击
      if(article.favorited) {
      
        // 取消点赞
        await deleteFavorite(article.slug)
        article.favorited = false
        article.favoritesCount -= 1
      } else {
      
        // 添加点赞
        await addFavorite(article.slug)
        article.favorited = true
        article.favoritesCount += 1
      }
      article.favoriteDisabled = false // 允许点击
    },
    async onFollow (author) {
      
      if (!this.user ) return this.$router.push('/login')
      author.followDisabled = true // 禁用点击
      if(author.following) {
      
        // 取消点赞
        await deleteFollow(author.username)
        author.following = false
        author.favoritesCount -= 1
      } else {
      
        // 添加点赞
        await addFollow(author.username)
        author.following = true
        author.followesCount += 1
      }
      author.followDisabled = false // 允许点击
    }
  }
}
script>

<style scoped>

style>

最终代码都在这儿：https://github.com/2604150210/realworld-nuxtjs

六、Nuxt.js 发布部署

1. 使用命令打包

https://zh.nuxtjs.org/guide/commands

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

命令	描述
nuxt	启动一个热加载的 Web 服务器（开发模式） localhost:3000。
nuxt build	利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。
nuxt start	以生产模式启动一个 Web 服务器 (需要先执行`nuxt build`)。
nuxt generate	编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。

可以将这些命令添加至 package.json：

"scripts": {
     
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start"
}

先执行yarn build，再执行yarn start

2. 最简单的部署方式

配置Host + Port

// nuxt.config.js
server: {
       
  host: '0.0.0.0',// 监听所有外网地址。在生产环境服务器上外网环境就能访问到了，在本地的话，局域网都能访问到了
    port: 3000
},

压缩发布包
- .nuxt文件夹（Nuxt打包生成的资源文件）
- static文件夹（项目中的静态资源）
- nuxt.config.js（给Nuxt服务来使用的）
- package.json （因为在服务端要安装第三方包）
- yarn.lock（因为在服务端要安装第三方包）
把发布包传到服务端
- 登录服务器：ssh [email protected]
- 选择一个目录创建一个realworld-nuxtjs文件夹：mkdir realworld-nuxtjs
- cd realworld-nuxtjs进入这个文件夹，然后使用pwd命令打印当前文件夹路径：/product/front/realworld-nuxtjs
- 回到本地，使用scp命令往服务器传压缩包：scp ~/JALProjects/lagou-fed/fed-e-task-03-03/code/realworld-nuxtjs/realworld-nuxtjs.zip [email protected]:/product/front/realworld-nuxtjs
解压
- 回到服务器的realworld-nuxtjs文件夹里，此时已经有了一个realworld-nuxtjs.zip文件，执行unzip realworld-nuxtjs.zip对压缩包解压
- 然后使用ls -al查看解压后的所有文件
安装依赖
- 执行yarn
启动服务
- 执行yarn start启动服务
- 访问：http://jiailing.com:3000/

3. 使用PM2在后台启动应用

Github仓库地址：https://github.com/Unitech/pm2
官方文档：https://pm2.io
在生产环境上安装：npm install --global pm2
启动：pm2 start 脚本路径，即：pm2 start --name realworld npm -- run start，我的服务器上使用pm2起yarn貌似有点问题，改为npm就成功了
访问：http://jiailing.com:3000/

PM2常用命令

命令	说明
pm2 list	查看应用列表
pm2 start	启动应用
pm2 stop	停止应用
pm2 reload	重载应用
pm2 restart	重启应用
pm2 delete	删除应用

4. 自动部署

传统的部署方式

更新
- 本地构建
- 发布
更新
- 本地构建
- 发布
…

现代化的部署方式（CI/CD）

5. 使用GitHub Actions 实现自动部署

CI/CD服务:

Jenkins
Gitlab CI
Github Actions
Travis CI
Circle CI
…

环境准备

Linux服务器

把代码提交到GitHub远程仓库

先在GitHub上建一个仓库，realworld-nuxtjs，将本地代码提交到仓库里。

echo "# realworld-nuxtjs" >> README.md
git init
echo node_modules > .gitignore
git add .
git commit -m "first commit"
git remote add origin [email protected]:2604150210/realworld-nuxtjs.git
git push -u origin master

配置GitHub Access Token

生成：https://github.com/settings/tokens

头像 -> Settings -> Developer settings -> Personal access tokens -> Generate new Token

Token名称填写Tocken，Select scopes勾选repo，然后滚动到网页最下面点击提交按钮。生成了Token
配置到项目的Secrets中：https://github.com/2604150210/realworld-nuxtjs/settings/secrets/new

回到项目https://github.com/2604150210/realworld-nuxtjs下面

Settings -> Secrets -> New Secrets

配置GitHub Actions执行脚本

在项目根目录创建.github/workflows目录
下载main.yml到workflows目录中：https://github.com/lipengzhou/realworld-nuxtjs/edit/master/.github/workflows/main.yml

修改配置 main.yml

下载下来main.yml是用npm来管理项目的，而我用的是yarn，所以对应部分改为yarn
修改对应的服务器路径为：/product/front/realworld-nuxtjs
wget后面的下载地址改为自己的仓库地址：https://github.com/2604150210/realworld-nuxtjs/releases/latest/download/release.tgz
在项目里https://github.com/2604150210/realworld-nuxtjs/settings/secrets/new配置HOST、USERNAME、PASSWORD、PORT

最终我的main.yml

name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: yarn
    - run: yarn build
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json yarn.lock pm2.config.json

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${
         {
          secrets.TOKEN }}
      with:
        tag_name: ${
         {
          github.ref }}
        release_name: Release ${
         {
          github.ref }}
        draft: false
        prerelease: false

    # 上传构建结果到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${
         {
          secrets.TOKEN }}
      with:
        upload_url: ${
         {
          steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${
         {
          secrets.HOST }}
        username: ${
         {
          secrets.USERNAME }}
        password: ${
         {
          secrets.PASSWORD }}
        port: ${
         {
          secrets.PORT }}
        script: |
          cd /product/front/realworld-nuxtjs
          wget https://github.com/2604150210/realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

配置PM2配置文件 pm2.config.json 我的服务器上pm2启动yarn有点问题，所以pm2使用npm来起项目。

{
       
  "apps": [
    {
       
      "name": "RealWorld",
      "script": "npm",
      "args": "start"
    }
  ]
}

提交更新
- git add .
- git commit -m"第一次发布部署-测试"
- git push （此时只是推送了提交记录，并不会触发自动化构建）
- git add .
- git tag v0.1.0 （通过tag打版）
- git tag （查看版本）
- git push origin v0.1.0 （把本地标签推送到远程仓库，会触发自动构建）
查看自动部署动态

很不幸跑了十几分钟，最终失败了，是在倒数第二步Deploy的地方失败的

于是我又把main.yml里面的yarn换成了npm来操作，然后重新重复一轮上面的Git操作：add 、commit、 push、 tag、 push tag。

我的代码地址：realworld-nuxtjs

重新发布部署一次，这次成功了，耶✌️✌️✌️

项目主页的右侧还可以点进去看到发布日志以及版本和源代码
访问网站：jiailing.com:3000

直接访问域名加端口有点丑，于是我分配了一个子域名指向了3000端口

http://realworld.jiailing.com/

nginx配置如下：

upstream realworld {
     
        server 127.0.0.1:3000 max_fails=7 fail_timeout=7s;
}

server {
     
        listen 80;
        server_name strapi.jiailing.com;
        location / {
     
                proxy_pass http://realworld;
        }
}

你可能感兴趣的:(大前端,Vue,服务器运维,NuxtJS,GitAction,Vue)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
vue2实现复制,粘贴功能周bro vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
【vite 自动配置路由】 CODER-V 前端 javascript vue.js 前端软件构建
手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
Vue3 vant组件库自动导入不叫虎子 Vue vue.js 前端 javascript 前端框架 typescript
实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
vant-element-ts一起使用存在的问题 flynn_ 问题总结 vue
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台网顺技术团队成品程序项目 java vue.js 汽车课程设计 spring boot
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
C# 开发教程-入门基础天马3798 教程系列整理 c#开发语言
1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
若依后端正常启动但是uniapp移动端提示后端接口异常大可大可抖 uni-app
pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
好看的vue登录页面(附源代码背景图) 小小薛定谔 vue.js javascript css 前端
一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag
uniapp 获取各种小程序code 灵魂清零 uniapp 小程序
各种小程序在进入小程序是都需要去获取code才能拿到基础信息，自己记录一下用uniapp开发小程序是获取微信小程序、百度小程序、头条小程序、支付宝小程序的codeVue.prototype.$global={appLogin(){returnnewPromise((resole,reject)=>{varthat=this;varwxLoginUrl=app.globalData.url+"/lo
VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite iwindyforest vmware mac os 10.10 workstation player
最近尝试了下VMware下安装MacOS 系统，安装过程中发现网上可供参考的文章都是VMware Workstation 10以下， MacOS X 10.9以下的文章，只能提供大概的思路，但是实际安装起来由于版本问题，走了不少弯路，所以我尝试写以下总结，希望能给有兴趣安装OSX的人提供一点帮助。写在前面的话：其实安装好后发现，由于我的th
关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？ deathwknight JavaScript java 框架
本人从学习Java开发到现在已有10年整，从一个要自学 java买成javascript的小菜鸟，成长为只会java和javascript语言的老菜鸟（个人邮箱：[email protected]）一路走来，跌跌撞撞。用自己的三年多业余时间，瞎搞一个小东西（基于模型驱动的B/S在线开发平台，非MVC框架、非代码生成）。希望与大家一起分享，同时有许些疑虑，希望有人可以交流下平台
如何把maven项目转成web项目 Kai_Ge maven MyEclipse
创建Web工程，使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web Module的Version为2.5.(3.0为Java7的,Tomcat6不支持). 如果提示错误,可能需要在Java Compiler设置Compiler compl
主管？？？ Array_06 工作
转载：http://www.blogjava.net/fastzch/archive/2010/11/25/339054.html 很久以前跟同事参加的培训，同事整理得很详细，必须得转！前段时间，公司有组织中高阶主管及其培养干部进行了为期三天的管理训练培训。三天的课程下来，虽然内容较多，因对老师三天来的课程内容深有感触，故借着整理学习心得的机会，将三天来的培训课程做了一个
python内置函数大全 2002wmj python
最近一直在看python的document，打算在基础方面重点看一下python的keyword、Build-in Function、Build-in Constants、Build-in Types、Build-in Exception这四个方面，其实在看的时候发现整个《The Python Standard Library》章节都是很不错的，其中描述了很多不错的主题。先把Build-in Fu
JSP页面通过JQUERY合并行 357029540 JavaScript jquery
在写程序的过程中我们难免会遇到在页面上合并单元行的情况，如图所示如果对于会的同学可能很简单，但是对没有思路的同学来说还是比较麻烦的，提供一下用JQUERY实现的参考代码 function mergeCell(){ var trs = $("#table tr"); &nb
Java基础冰天百华 java基础
学习函数式编程 package base; import java.text.DecimalFormat; public class Main { public static void main(String[] args) { // Integer a = 4; // Double aa = (double)a / 100000; // Decimal
unix时间戳相互转换 adminjun 转换 unix 时间戳
如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)？ Java time JavaScript Math.round(new Date().getTime()/1000) getTime()返回数值的单位是毫秒 Microsoft .NET / C# epoch = (DateTime.Now.ToUniversalTime().Ticks - 62135
作为一个合格程序员该做的事 aijuans 程序员
作为一个合格程序员每天该做的事 1、总结自己一天任务的完成情况最好的方式是写工作日志，把自己今天完成了什么事情，遇见了什么问题都记录下来，日后翻看好处多多 2、考虑自己明天应该做的主要工作把明天要做的事情列出来，并按照优先级排列，第二天应该把自己效率最高的时间分配给最重要的工作 3、考虑自己一天工作中失误的地方，并想出避免下一次再犯的方法出错不要紧，最重
由html5视频播放引发的总结 ayaoxinchao html5 视频 video
前言项目中存在视频播放的功能，前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备，必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解，不了解不知道，水真是很深。本文所记录的知识一些浅尝辄止的知识，说起来很惭愧。视频结构本该直接介绍html5的<video>的，但鉴于本人对视频
解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat bewithme httpclient
如果你构建了一个https协议的站点，而此站点的安全证书并不是合法的第三方证书颁发机构所签发，那么你用httpclient去访问此站点会报如下错误 javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu
Jedis连接池的入门级使用 bijian1013 redis redis数据库 jedis
Jedis连接池操作步骤如下： a.获取Jedis实例需要从JedisPool中获取； b.用完Jedis实例需要返还给JedisPool； c.如果Jedis在使用过程中出错，则也需要还给JedisPool； packag
变与不变 bingyingao 不变变亲情永恒
变与不变周末骑车转到了五年前租住的小区，曾经最爱吃的西北面馆、江西水饺、手工拉面早已不在，各种店铺都换了好几茬，这些是变的。三年前还很流行的一款手机在今天看起来已经落后的不像样子。三年前还运行的好好的一家公司，今天也已经不复存在。一座座高楼拔地而起，
【Scala十】Scala核心四：集合框架之List bit1129 scala
Spark的RDD作为一个分布式不可变的数据集合，它提供的转换操作，很多是借鉴于Scala的集合框架提供的一些函数，因此，有必要对Scala的集合进行详细的了解 1. 泛型集合都是协变的，对于List而言，如果B是A的子类，那么List[B]也是List[A]的子类，即可以把List[B]的实例赋值给List[A]变量 2. 给变量赋值(注意val关键字，a，b
Nested Functions in C bookjovi c closure
Nested Functions 又称closure，属于functional language中的概念，一直以为C中是不支持closure的，现在看来我错了，不过C标准中是不支持的，而GCC支持。既然GCC支持了closure，那么 lexical scoping自然也支持了，同时在C中label也是可以在nested functions中自由跳转的
Java-Collections Framework学习与总结-WeakHashMap BrokenDreams Collections
总结这个类之前，首先看一下Java引用的相关知识。Java的引用分为四种：强引用、软引用、弱引用和虚引用。强引用：就是常见的代码中的引用，如Object o = new Object();存在强引用的对象不会被垃圾收集
读《研磨设计模式》-代码笔记-解释器模式-Interpret bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 解释器（Interpreter）模式的意图是可以按照自己定义的组合规则集合来组合可执行对象 * * 代码示例实现XML里面1.读取单个元素的值 2.读取单个属性的值 * 多
After Effects操作&快捷键 cherishLC After Effects
1、快捷键官方文档中文版：https://helpx.adobe.com/cn/after-effects/using/keyboard-shortcuts-reference.html 英文版：https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html 2、常用快捷键
Maven 常用命令 crabdave maven
Maven 常用命令 mvn archetype:generate mvn install mvn clean mvn clean complie mvn clean test mvn clean install mvn clean package mvn test mvn package mvn site mvn dependency:res
shell bad substitution daizj shell 脚本
#!/bin/sh /data/script/common/run_cmd.exp 192.168.13.168 "impala-shell -islave4 -q 'insert OVERWRITE table imeis.${tableName} select ${selectFields}, ds, fnv_hash(concat(cast(ds as string), im
Java SE 第二讲（原生数据类型 Primitive Data Type） dcj3sjt126com java
Java SE 第二讲： 1. Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit 2. Java 中的数据类型分为两大类： 1）原生数据类型（Primitive Data Type） 2）引用类型（对象类型）（R
CGridView中实现批量删除 dcj3sjt126com PHP yii
1，CGridView中的columns添加 array( 'selectableRows' => 2, 'footer' => '<button type="button" onclick="GetCheckbox();" style=&
Java中泛型的各种使用 dyy_gusi java 泛型
Java中的泛型的使用：1.普通的泛型使用在使用类的时候后面的<>中的类型就是我们确定的类型。 public class MyClass1<T> {//此处定义的泛型是T private T var; public T getVar() { return var; } public void setVa
Web开发技术十年发展历程 gcq511120594 Web 浏览器数据挖掘
回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
openSession()与getCurrentSession()区别： hetongfei java DAO Hibernate
来自 http://blog.csdn.net/dy511/article/details/6166134 1.getCurrentSession创建的session会和绑定到当前线程,而openSession不会。 2. getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而openSession必须手动关闭。这里getCurrentSession本地事务(本地
第一章安装Nginx+Lua开发环境 jinnianshilongnian nginx lua openresty
首先我们选择使用OpenResty，其是由Nginx核心加很多第三方模块组成，其最大的亮点是默认集成了Lua开发环境，使得Nginx可以作为一个Web Server使用。借助于Nginx的事件驱动模型和非阻塞IO，可以实现高性能的Web应用程序。而且OpenResty提供了大量组件如Mysql、Redis、Memcached等等，使在Nginx上开发Web应用更方便更简单。目前在京东如实时价格、秒
HSQLDB In-Process方式访问内存数据库 liyonghui160com
HSQLDB一大特色就是能够在内存中建立数据库，当然它也能将这些内存数据库保存到文件中以便实现真正的持久化。先睹为快！下面是一个In-Process方式访问内存数据库的代码示例：下面代码需要引入hsqldb.jar包（hsqldb-2.2.8） import java.s
Java线程的5个使用技巧 pda158 java 数据结构
Java线程有哪些不太为人所知的技巧与用法？　　萝卜白菜各有所爱。像我就喜欢Java。学无止境，这也是我喜欢它的一个原因。日常工作中你所用到的工具，通常都有些你从来没有了解过的东西，比方说某个方法或者是一些有趣的用法。比如说线程。没错，就是线程。或者确切说是Thread这个类。当我们在构建高可扩展性系统的时候，通常会面临各种各样的并发编程的问题，不过我们现在所要讲的可能会略有不同。
开发资源大整合：编程语言篇——JavaScript（1） shoothao JavaScript
概述：本系列的资源整合来自于github中各个领域的大牛，来收藏你感兴趣的东西吧。程序包管理器管理javascript库并提供对这些库的快速使用与打包的服务。 Bower - 用于web的程序包管理。 component - 用于客户端的程序包管理，构建更好的web应用程序。 spm - 全新的静态的文件包管
避免使用终结函数 vahoa.ma java jvm C++
终结函数（finalizer）通常是不可预测的，常常也是很危险的，一般情况下不是必要的。使用终结函数会导致不稳定的行为、更差的性能，以及带来移植性问题。不要把终结函数当做C++中的析构函数（destructors）的对应物。我自己总结了一下这一条的综合性结论是这样的： 1）在涉及使用资源，使用完毕后要释放资源的情形下，首先要用一个显示的方