个人博客网站创建全过程

404 阅读18分钟

个人博客网站创建全过程

前言

'他强由他强,清风拂山岗;他横由他横,明月照大江.他自狠来他自恶,我自一口真气足。'

勇敢的承认错误,可以追求完美,不能因为完美而影响自己的判断。

热爱编程不能被编程意外的事物打扰你,学习进步的空间,做好自己就可以了,做一个纯粹的人,从各个方面来解决自己遇到的困顿啊的局面。

从头来过更是自己的一步成长。 摒弃不会直接查文档的习惯,自己先去找原解决方法,切记切记,每写一次就是对自己代码方式的改进。

在创建项目的过程中遇到的很多问题和解决方法都在文档中随时展现出来。

自己选择如下的技术和框架,此框架就是我认为做好的框架所以从开始就是做一个编程的布道者,从前端入手。

  • 前端搭建组成:Vue + Webpack + Axios + vue-router + vuex + vue-i18n + Ant-desgin + Element-ui
  • 后端搭建组成:Nodejs + Express + Mysql
  • 本地开发电脑系统:macOS
  • 云服务器:华为云
  • 云服务器系统:linux CentOS 8.2 64bit
  • 域名:www.76wenshu.com

使用如上的组成部分最好是去官网上看或者学习,官网上能介绍方式足够正规少走弯路。

本人是在macOS上进行开发的,windows系统应该不会遇到这么多环境搭建的问题。如果有兴趣可以对比一下思路,如果我的有问题请及时指出来,来帮助我快速提升。

遇到的主要问题就是OS系统和云服务器环境安装(一把心酸血泪史)

引用部分以写明引用出处,非引用即原创。

前端项目初始化

webpack

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

每一项技术的出现都是解决,人们在生产生活中遇到的问题,能够更高效的提高我们的生产效率。

从最初的前端架构开始 webpack就是打包工具让多个文件生成一个json文件

新建文件夹(不能命名与webpack相同),因为在package.json中name相同就会出现下面的错误

npm init -y

//这就是是一个坑的点记得在使用的过程中就是要是用 npm install

install => i

npm install -D webpack webpack-cli 
//-D  //是我们安装开发环境的依赖 -save -dev 简写

出现问题的解决方式不是直接将报错的文字去浏览器中搜索,先了解报错的问题,之后在去官网查找问题产生的原因。 (自己在网络中搜索之后,不会得到更多的,只是解决了当时的问题,回头想想什么都没有到)。

问题:

wenshu@wenshudeAir webpackStyle % npm install -D webpack wepack-cli
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

解决方式:在package.json中的name不能是”webpack“

创建入口文件文件index.html(前期引用的一个展现文件,就是相当于我们新建一个普通的html文件映入vue的那种,后期就当模板引入用于打包)

创建主文件 main.js(所有的逻辑和html都是会从这里来,主要是使用vue框架)

npm install vue //=> npm i vue 

存有疑问在安装依赖的时候使用 npm i vue 未安装带package.json中(最后使用的 npm install vue 解决的)

报错的原因是因为在使用的过程中,代码中不认的import

main.js:2 Uncaught SyntaxError: Cannot use import statement outside a module

需要使用webpack进行项目的

npm run build
//用来解析vue文件
npm install vue-loader vue-template-compiler -D
//用于解析vue中的style
npm install css-loader -D

因为在vue-loader中需要依赖css-loader所以在使用中我们会在使用的vue-loader安装之后在安装css-loader进行使用

npm install css-loader

//vue-loader

问题:

vue.runtime.esm.js:623 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

解决:

是引入的vue依赖是的js不对,

runtime only 的文件是vue.common.js

compilter only 的是 compilter.js

runtime 和 compilter 的文件就是vue.js

默认导出的是common我们需要指定导出vue.js

在webpack.confing.js中配置使用的

resole:{
    alias:{
        'vue':'vue/dist/vue.js'
    }
}

插件的使用(就是为解决问题而出现的就是相当于每个事件点应该做一些特殊的事情) 插件(plugins) 插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事。

//具体下方插件的用途的可以去webpack的官网了解

html-webpack-plugin
//https://www.webpackjs.com/plugins/html-webpack-plugin/
// html 模板(相当于生命周期的时机执行过程)  new HtmlWebpackPlugin({ template: './index.html' }),

clean-webpack-plugin
//https://www.npmjs.com/package/clean-webpack-plugin
//By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.
//默认的情况下,将删除webpack中打包输出的文件夹,还有重新打包建立之后未使用的文档。
autoprefixer
//http://autoprefixer.github.io/
//Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes
webpack
webpack.HotModuleReplacementPlugin()
//https://www.webpackjs.com/concepts/hot-module-replacement/
/* 
 devServer: {
    // contentBase: './dist',
    // 本地开发指向服务路径的情况下着his错误的
    // static: './dist',
    static: './',
    open: true,
    //打开浏览器
    hot: true,
    //打开热模块更换特性
  },
  还有很多选项,可以在选项中,官网中查看
*/

热模块替换,能够使在修改的过程中的问题不需要重新刷新还是在的

hotMoudelReplacePlugin
//用于提取生产和开发环境的中相同webpack配置代码就是相当于,抽取公共的对象
npm install -D webpack-merge

{{ merge }}

主要的意义在于区分生产环境,开发环境的打包区别

babel用来转es6的语法

主要是看.json中的执行脚本文件

添加项目路由 //路由中的hash和history两种模式,在to B的情况建议是hash中使用,history是在to C中使用的多一点 //主要这里想使用的是想了解路由的产生和使用

npm install -D vue-router

添加项目代码检查 //主要是想使用现有的问题页面能实现我们需要的,编辑代码是有的语法错误及时改正

npm install --save-dev eslint
npx eslint --init
npm install --save-dev prettier

//JOSN文件在项目中的主要依据就是,作为配置的参数进行使用的 新建一个.prettierrc.json配置文件。如果无需自定义配置,直接{}, 如果有需要,可以进行配置,如:

{
  "useTabs": true,
  "tabSize": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "parser": "typescript"
}

关闭 ESLint 中的冲突规则,避免格式问题在编辑器报错。

npm install --save-dev eslint-config-prettier

npx mrm@2 lint-staged

这个命令会根据package.json的相关依赖自动安装、配置 lint-staged。所以,前提必须先完成 ESLint 和 Prettier 安装。

国际化 //主要是现有现有页面开发使用的过程中已经有过现有的中英文,所以自己应该了解中英文的过程。 与世界接轨哈哈(^_^)v

npm install vue-i18n

src/assets/language/language.js 单文件引入 kazupon.github.io/vue-i18n/zh…

vue国际化专用

引入组件库 //normal unuse two componrnts, //正常的情况喜爱是不能使用两个组件库的,因为两个组件的引入极大的增加了webpack 的打包难度

element-ui //够轻量化建议使用(功能稍少一些)

ant-design-vue //太重实现功能和element没什么太大区别都能够正常的使用(功能icon更多一些) //具体了解此组件更适合react使用

为什么引用双组件??(多学多用)

因为在使用的过成功单组件功能和使用组件过于单一(其中icon)

取其精华、去其糟粕

阿里图标库

vue webpack引入可以看官网有说明

问题:

ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0 Module parse failed:

//查看配置rules 解决方法:

{
    test: /\.(png|jpg|gif|eot|woff|ttf|svg|webp|PNG)(\?\S*)?$/,
    use: ["file-loader"],
},

项目布局分块:个人信息、爱国者板块、热门文章推荐、书籍推荐、76文书博客创建时间线、学习路线时间线规划、时间倒计时、个人博客、鸣谢

前端页面操作处理

白屏(处理首页加载时间过长的问题)

//页面处理前期还需要动画,进行展示 link引入的问题是 webpack because its MIME type (‘text/html‘) is not a supported stylesheet MIME type错误

webpakc-dev-server 中设置的路径有关系,去webpack.base.js看了下果然是中的static的路径指向有问题

在webpack中的问题在资源的引入路径上

devServer: { // contentBase: './dist', // 本地开发指向服务路径的情况下着his错误的 // static: './dist', static: './', open: true, hot: true, }, 简单书写的使用

在白屏阶段进行页面的加载动画,进行友好的展现使用。

全局样式统一基础样式

相同样式也可以直接写在common.scss中就可以了。不用单独书写和引入。 title index.js文件中直接引入 import './asset/style/common.scss'

音乐播放audio

因浏览器禁止自动播放音乐干扰用户所以给用户加了一个交互的过程在能后进行,音乐的播放

加载时间很慢

progress-bar-webpack-plugin[8]:查看编译进度;

npm i -D progress-bar-webpack-plugin
const chalk = require('chalk')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
module.exports = {
  plugins: [
    // 进度条
    new ProgressBarPlugin({
        format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
      })
  ],
}

speed-measure-webpack-plugin[9]:查看编译速度;

npm i -D speed-measure-webpack-plugin
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
  // ...webpack config...
})

webpack-bundle-analyzer[10]:打包体积分析。(及其重要的)

npm i -D webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 打包体积分析
    new BundleAnalyzerPlugin()
  ],
}

webpack.pro.js

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        parallel: 4,
      }),
      new TerserPlugin({
        parallel: 4,
        terserOptions: {
          parse: {
            ecma: 8,
          },
          compress: {
            ecma: 5,
            warnings: false,
            comparisons: false,
            inline: 2,
          },
          mangle: {
            safari10: true,
          },
          output: {
            ecma: 5,
            comments: false,
            ascii_only: true,
          },
        },
      }),
    ],
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
      // 重复打包问题
      cacheGroups: {
        vendors: { // node_modules里的代码
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
          // name: 'vendors', 一定不要定义固定的name
          priority: 10, // 优先级
          enforce: true,
        },
      },
    },
    runtimeChunk: true,

  },

还有就是组件库的按需引入的问题。 .babelrc 中element ui中的2015报错

@babel/preset-env就使用它

添加页面导航

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';


Vue.prototype.$driver = new Driver({
  stageBackground: '#fff', // 对话的背景颜色ß
  allowClose: true, //是否允许点击外部关闭
  doneBtnText: '已知悉', // 完成按钮的内容
  closeBtnText: '关闭', // 关闭按钮标题
  nextBtnText: '下一步', // 下一步按钮的内容
  prevBtnText: '上一步', // 上一步按钮的内容
});
//页面中的展示
this.$driver.defineSteps([{
        element: '#heardInfo', // 元素的id
        popover: {
          title: '博客信息展示模块',
          description: '简述作者的博客背景,本模块有彩蛋,希望您能触发。',
          position: 'bottom',
        },
      }, {
        element: '#learnRoute', // 元素的id
        popover: {
          title: '学习路线基础计算机学科模板块',
          description: '点击本模块会有学习劣币哦啊',
          position: 'bottom',
        },
      }]);

      this.$driver.start();

      

前端喧嚷makedown文档


npm install vue-loader vue-template-compiler -D

npm install --save vue-markdown

import VueMarkdown from 'vue-markdown'
export default {
  components: {
    VueMarkdown // 注入组件
  },
  data () {
    return { 
      value: MarkdownData // value的值是要解析的markdown数据
    }
  }
}

<VueMarkdown :source="value"></VueMarkdown>


npm install github-markdown-css

import 'github-markdown-css/github-markdown.css'

<div class="markdown-body">
    <VueMarkdown :source="value"></VueMarkdown>
</div>


npm install highlight.js


import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
// 如果开启了typescript 需要额外安装 npm install @types/highlight.js
// 通过 import * as hljs from 'highlight.js' 引入
Vue.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})
// 也可以把这自定义指令封装 通过Vue.use(),来注入
 <div class="markdown-body">
     <VueMarkdown :source="value" v-highlight></VueMarkdown>
 </div>

前端部分告一段落

服务器的搭建(借用很多大佬的文章都已表明出处)

mac本地链接服务器搭建环境

mac 可以直接是shell iterm2 主要的原因是可以上传和下载文件,rz sz 直接操作不用考虑,使用别的操作直接控制台操作就可以的

远程链接 ssh root@XXX.XXX.XXX.XX -p 22 之后 cd / ll 查看目录结构(无UI界面操作可以直接使用Linux系统)

问题:

apt-get: command not found//这个的出现是因为系统的原因。

Linux系统分为两种:

1.RedHat系列:Redhat、Centos、Fedora等

2.Debian系列:Debian、Ubuntu等

RedHat系列的包管理工具是yum

Debian系列的包管理工具是apt-get

查看系统版本:

cat /proc/version
1
Linux version 4.18.0-240.10.1.el8_3.x86_64 (mockbuild@kbuilder.bsys.centos.org) (gcc version 8.3.1 20191121 (Red Hat 8.3.1-5) (GCC)) #1 SMP Mon Jan 18 17:05:51 UTC 2021

//因为os操作系统不支持,rz和sz的操作方法 mac使用rz sz报错 waiting to receive.**B0100000023be50最新解决方案

Homebrew国内如何自动安装(国内地址)

自动脚本(全部国内地址)(在终端中复制粘贴回车下面脚本) 苹果电脑 常规安装脚本(推荐 完全体 几分钟安装完成) /bin/zsh -c "(curlfsSLhttps://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"苹果电脑极速安装脚本(精简版几秒钟安装完成):/bin/zshc"(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 苹果电脑 极速安装脚本(精简版 几秒钟安装完成): /bin/zsh -c "(curl -fsSL gitee.com/cunkai/Home…)" speed

苹果电脑 卸载脚本: /bin/zsh -c "$(curl -fsSL gitee.com/cunkai/Home…)" 常见错误去下方地址查看 gitee.com/cunkai/Home… Linux电脑 安装脚本: rm Homebrew.sh ; wget gitee.com/cunkai/Home… ; bash Homebrew.sh Linux电脑 卸载脚本: rm HomebrewUninstall.sh ; wget gitee.com/cunkai/Home… ; bash HomebrewUninstall.sh

之后网上搜索问题时大多都是给出了一个下载链接,因为要下载两个文件,分别是 iterm2-send-zmodem.sh iterm2-recv-zmodem.sh 然后给的链接是这个 github.com/mmastrac/it… 我试了好几次链接好像404了 可能以前确实可以解决 但现在好像不行了

我是这样解决的 打开GitHub官网 github.com/ 然后登录进去搜索mmastrac

官网下载iterm2

卸载 如果是通过手动下载的DMG文件安装的话 你可以转到Finder中的/Applications文件夹,找到iTerm 图标,右键单击它,然后move to trash。 defaults delete com.googlecode.iterm2

解压之后 将 iterm2-send-zmodem.sh iterm2-recv-zmodem.sh 移动到/usr/local/bin/下面 之后打开iterm2 按住command +,进入 Preperences --> Profiles–>Advanced找到Triggers点击edit

Regular expression: rz waiting to receive.**B0100

Action: Run Silent Coprocess

Parameters: /usr/local/bin/iterm2-send-zmodem.sh

Regular expression: **B00000000000000

Action: Run Silent Coprocess

Parameters: /usr/local/bin/iterm2-recv-zmodem.sh

注意 上面是iterm2-send-zmodem.sh 下面是iterm2-recv-zmodem.sh 一定不能放反位置了 要不然上传下载命令执行也会反着的

Macos下安装SZ RZ命令工具以及报错处理

/usr/local/bin/iterm2-recv-zmodem.sh: line 20: /usr/local/bin/rz: No such file or directory

brew list lrzsz

/usr/local/bin/sz "FILE"ebbufsize4096/opt/homebrew/Cellar/lrzsz/0.12.201/bin/sz"FILE" -e -b --bufsize 4096 /opt/homebrew/Cellar/lrzsz/0.12.20_1/bin/sz "FILE" -e -b --bufsize 4096

/usr/local/bin/rz -E -e -b --bufsize 4096 /opt/homebrew/Cellar/lrzsz/0.12.20_1/bin/rz -E -e -b --bufsize 4096

ssh root@XXX.XXX.XXX.XX -p 22 password:(输入密码)

pwd 查看当前目录 /root

服务器前端环境搭建

搭建服务器Nodejs环境

Nodejs 新建文件夹 在 /usr/local/node //在官网上下载安装包,之后通过rz命令上传到服务器进行使用

mv /root/node-v14.18.1-linux-x64.tar ./ //命令行是 解压tar结尾的压缩包如果是zip 可以使用 unzip tar -vxf node node-v14.18.1-linux-x64.tar

cd /node 文件包

npm -v

//安装node npm ln -s /usr/local/node/node-v14.18.1-linux-x64/bin/node /usr/local/bin/node ln -s /usr/local/node/node-v14.18.1-linux-x64/bin/npm /usr/local/bin/npm

node -v npm -v

搭建服务器nginx环境

nginx 原出处CentOS 7 安装 Nginx

Linux 的两种安装方式 首先,介绍一下 Linux 的安装方式,可以是 yum 安装,也可以是源码包安装。

yum 安装:简单方便,不易出错。 源码包安装:有点繁琐,但是服务性能好。

yum 安装

  1. 安装 Nginx yum 安装 nginx 非常简单,就输入一条命令即可。 sudo yum -y install nginx # 安装 nginx sudo yum remove nginx # 卸载 nginx 复制代码使用 yum 进行 Nginx 安装时,Nginx 配置文件在 /etc/nginx 目录下。

  2. 配置 Nginx 服务

$ sudo systemctl enable nginx # 设置开机启动 
$ sudo service nginx start # 启动 nginx 服务
$ sudo service nginx stop # 停止 nginx 服务
$ sudo service nginx restart # 重启 nginx 服务
$ sudo service nginx reload # 重新加载配置,一般是在修改过 nginx 配置文件时使用。

复制代码源码包安装 Nginx 源码包安装方式步骤比较繁琐,并且需要提前安装一些 Nginx 依赖库。

依赖库安装

  1. 安装 gcc 环境
$ sudo yum -y install gcc gcc-c++ # nginx 编译时依赖 gcc 环境

复制代码2. 安装 pcre

$ sudo yum -y install pcre pcre-devel # 让 nginx 支持重写功能

复制代码3. 安装 zlib zlib 库提供了很多压缩和解压缩的方式,nginx 使用 zlib 对 http 包内容进行 gzip 压缩 sudoyumyinstallzlibzlibdevel复制代码4.安装openssl安全套接字层密码库,用于通信加密sudo yum -y install zlib zlib-devel 复制代码4. 安装 openssl 安全套接字层密码库,用于通信加密 sudo yum -y install openssl openssl-devel 复制代码以上安装完成后,进行 nginx 安装。 nginx 源码包安装 将准备好的 nginx-1.11.5.tar.gz 包,拷贝至 /usr/local/nginx 目录下(一般习惯在此目录下进行安装)进行解压缩。 源码包下载地址:nginx.org/en/download…

$ sudo tar -zxvf  nginx-1.11.5.tar.gz # 解压缩

复制代码在完成解压缩后,进入 nginx-1.11.5 目录进行源码编译安装。

$  cd nginx-1.11.5
$ ./configure --prefix=/usr/local/nginx # 检查平台安装环境
  # --prefix=/usr/local/nginx  是 nginx 编译安装的目录(推荐),安装完后会在此目录下生成相关文件

复制代码如果前面的依赖库都安装成功后,执行 ./configure --prefix=/usr/local/nginx 命令会显示一些环境信息。如果出现错误,一般是依赖库没有安装完成,可按照错误提示信息进行所缺的依赖库安装。 进行源码编译并安装 nginx

$ make # 编译
$ make install # 安装

复制代码源码包安装与 yum 安装的 nginx 服务操作命令也不同。

启动服务

$ /usr/local/nginx/sbin/nginx

重新加载服务

$ /usr/local/nginx/sbin/nginx -s reload

停止服务

$ /usr/local/nginx/sbin/nginx -s stop

查看 nginx 服务进程

$ ps -ef | grep nginx # 查看服务进程

华为云 需要添加入方80规则

将webpack打包的dist文件放到云服务的/nginx/html中替换index.html

  1. 先删除html中的原文件内容 rm -f 强制删除
  2. rz 上传dist中打包好的文件
  3. 之后关闭nginx的服务之后在启动,项目就上到云服务了
  4. 如果你替换前端代码之后发现页面内容还是之前的页面请清除缓存

此处需要学习linux命令

页面就能正常展现 实测页面 http://122.112.241.59/#/

域名已购买还在备案审核中后期会添加这部分内容

发布前端内容告一段落

后端项目搭建

Nodejs express Mysql

npm install express -g

Missing write access to /usr/local/lib/node_modules 在苹果下载则加上sudo,然后会提示您输入密码~

sudo npm install 包名 -g

4.x版本把它单独拿出来了

npm install express-generator

express apiLearn

npm start

//下载安装一晚上mysql ……^_^

Mysql install

Mysql install GUI 如果出现为识别到开发者的时候可以通过上方的?点击进入’通用‘已让电脑允许启用

vim operation

error mysql -uroot -p

//删除 ./bin/www/js //改写 app.js

var http = require('http');
var server = http.createServer(app);

//删除导出增加监听
server.listen('3000');

npm install mysql --save

【mysql】command not found: mysql 解决方案一

1、在终端进入目录:/usr/local/bin

cd /usr/local/bin/

2、在终端设置mysql命令路径

sudo ln -fs /usr/local/mysql/bin/mysql mysql

3、输入mysql -u root -p

Navicat Premium新建数据库 链接本地数据库之后新建数据库 创建新表

新建util文件


const mysql = require('mysql')

module.exports ={
    //数据库配置
    config:{
        host:'localhost',
        port:'3306',
        user:'root',
        password:'123123123123.123',
        database:'Mytest'
    },
    //链接数据库,使用mysql的链接池的方式
    //链接池的对象
    sqlContect:function(sql,sqlArr,callBack){
        const pool = mysql.createPool(this.config);
        pool.getConnection((err,conn)=>{
            console.log('1234')
            if(err){
                console.log('err fuck')
                return 
            }
            //事件驱动回调
            conn.query(sql,sqlArr,callBack)
            //释放链接
            conn.release()
        })

    }

}

var express = require('express');
var router = express.Router();
const dbConfig = require('./../util/dbconfig')

/* GET home page. */
router.get('/', function(req, res, next) {
const sql = 'select * from cate';
const sqlArr = [];
const callBack = (err, data)=>{

  if(err){
    console.log('链接失败了')
  }else{
    res.send({
      'list':data
    })
  }

};
dbConfig.sqlContect(sql,sqlArr,callBack)

  // res.render('index', { title: 'Express' });
});

module.exports = router;

重构修改另一种开发请求实现

class Db{
    constructor(){
        this.connect = mysql.createConnection(config);
        this.connect.connect(err =>{
            if(err){
                console.log('数据库链接失败')

            }else{
                console.log('数据库链接成功')
            }
        })
    }
    query(sql){
        let p=new Promise((resolve,reject)=>{
            this.connect.query(sql,(err,result)=>{
                if(err){
                    console.log('失败')
                    reject([err,null])

                }else{
                    console.log('成功')
               
                    resolve([null,result])
                }
            })
        }).catch((err)=>{
            console.log(err)
        })
        // Promise的UnhandledPromiseRejectionWarning问题 https://www.jianshu.com/p/0293e0e89d8b
        return p
    }
}

需要学习sql语句学习

//后端实现分页查询
let sql1 = `select * from articles  ${wherestr}`;//可以计算总的条数
//腾讯一面问我SQL语句中where条件为什么写上1=1(https://zhuanlan.zhihu.com/p/351640361)
// wherestr = `where 1`
/* 
使用where 1=1 的坏处
我们在写SQL时,加上了1=1后虽然可以保证语法不会出错!

select * from table_name where 1=1;
但是因为table中根本就没有名称为1的字段,该SQL其实等效于select * from table,这个SQL语句很明显是全表扫描,需要大量的IO操作,数据量越大越慢。

所以在查询时,where1=1的后面需要增加其它条件,并且给这些条件建立适当的索引,效率就会大大提高。
 */

//全篇总结
// 加了where 1=1,后边的条件就可以无脑用and开头了
//MYSQL limit用法(https://www.cnblogs.com/cai170221/p/7122289.html)
// mysql> SELECT * FROM table LIMIT 5,10; // 检索记录行 6-15   
  
// //为了检索从某一个偏移量到记录集的结束所有的记录行,可以指定第二个参数为 -1:    
// mysql> SELECT * FROM table LIMIT 95,-1; // 检索记录行 96-last.   
  
// //如果只给定一个参数,它表示返回最大的记录行数目:    
// mysql> SELECT * FROM table LIMIT 5; //检索前 5 个记录行   
  
// //换句话说,LIMIT n 等价于 LIMIT 0,n。  
let sql2 = `select * from articles  ${wherestr} order by id asc limit ${startIndex},${pageSize}`;//可以计算总的条数
// where 1=1的应用,不是什么高级的应用,也不是所谓的智能化的构造,仅仅只是为了满足多条件查询页面中不确定的各种因素而采用的一种构造一条正确能运行的动态SQL语句的一种方法。

postman 下载使用 www.postman.com/downloads/

Navicat Premium新建数据库学习使用

listing directory /

express 配置跨域

重要节点实现前后端联通

启动后端项目 nodemon app.js

启动数据库 mysql -uroot -p

//输入密码进行处理的数据

后端项目服务器搭建

这是一个浩大的心酸工程,数不尽的坑去做坚持带来你就是最棒的!!

安装mysql

yum install mysql

查看centOS版本

cat /etc/redhat-release

centOS 8 报错:Failed to set locale, defaulting to C.UTF-8

这里会有两种原因

系统没有安装对应的语言包 没有配置正确的语言环境

locale -a

这里有en_US.utf8,所以是第二种情况。执行以下命令即可

echo "export LC_ALL=en_US.UTF-8"  >>  /etc/profile
echo "export LC_CTYPE=en_US.UTF-8"  >>  /etc/profile
source /etc/profile

centos安装mysql及报错注意事项 Centos7.0安装mysql 安装步骤 别去看其他的csdn了,全是坑.

1.卸载mariadb 注意安装mysql-8.0.18前要先删除本机安装的mariadb,检查已经安装的mariadb列表:

rpm -qa | grep mariadb

yum -y remove 上面查出来的名字 安装mysql 1.更新yum

yum update

2.下载rpm包 wget dev.mysql.com/get/mysql80… 3.安装软件源

rpm -Uvh dev.mysql.com/get/mysql80…

4.安装mysql

yum -y install mysql-community-server

5.启动mysql

service mysqld start #查看运行状态 service mysqlID status

6.查看mysql默认密码

grep 'temporary password' /var/log/mysqld.log

2020-06-22T04:13:29.369714Z 6 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: n7?e9n_ig2Ho

7.登陆

mysql -u root -p "n7?e9n_ig2Ho"

姓名.123

8.修改默认密码

ALTER USER 'root'@'localhost' IDENTIFIED BY '新密码';

此时如果报错:

ERROR 1819 (HY000): Your password does not satisfy the current policy requirements。

说的是你的密码不符合现在版本的校验规则,也就是密码不合法.

对于5.7之前,修改校验规则是这样的

mysql> set global validate_password_policy=0;

mysql> set global validate_password_length=1;

对于mysql8.0,修改如下:

mysql> set global validate_password.policy=0;

mysql> set global validate_password.length=1;

原因需要查看它的设置规则上面配置好之后才能查看,不然会报让你先重置密码:

SHOW VARIABLES LIKE 'validate_password%';

下面是8.0校验规则:注意看validate_password.policy和validate_password.length,password后面是点不是"_"

下面是5.7的密码配置规则,注意看validate_password_policy和validate_password_length,password,password后面是"_",不是"."

9.开放mysql外网访问

CREATE USER 'root'@'%' IDENTIFIED BY '上面新设置的密码';

10.给root授权

grant all privileges on . to 'root'@'%';

11.刷新新用户授权

FLUSH PRIVILEGES;

12.重启mysql

service mysqld restart

13.修改加密方式

ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '上面新设置的密码';

14.重启mysql

service mysqld restart

退出mysql语句

mysql-> exit

/var/cache/dnf/mysql80-community-fa2cafb076194999/packages/mysql-community-client-8.0.27-1.el7.x86_64.rpm: Header V3 DSA/SHA256 Signature, key ID 5072e1f5: NOKEY

//初始密码 fITa4n1=Ytro

报错 mysql Error: Unable to find a match: mysql

解决措施: yum update //升级CentOS Linux release 版本

先登录数据库 mysql -u root -p

"password"

查看mysql文件路径: show variables like '%dir%';

+-----------------------------------------+--------------------------------+ | Variable_name | Value | +-----------------------------------------+--------------------------------+ | basedir | /usr/ | | binlog_direct_non_transactional_updates | OFF | | character_sets_dir | /usr/share/mysql-8.0/charsets/ | | datadir | /var/lib/mysql/ | | innodb_data_home_dir | | | innodb_directories | | | innodb_doublewrite_dir | | | innodb_log_group_home_dir | ./ | | innodb_max_dirty_pages_pct | 90.000000 | | innodb_max_dirty_pages_pct_lwm | 10.000000 | | innodb_redo_log_archive_dirs | | | innodb_temp_tablespaces_dir | ./#innodb_temp/ | | innodb_tmpdir | | | innodb_undo_directory | ./ | | lc_messages_dir | /usr/share/mysql-8.0/ | | plugin_dir | /usr/lib64/mysql/plugin/ | | replica_load_tmpdir | /tmp | | slave_load_tmpdir | /tmp | | tmpdir | /tmp | +-----------------------------------------+--------------------------------+ 19 rows in set (0.01 sec)

2.停止mysql服务

service mysqld stop 复制代码 3.创建新的数据库存放目录

mkdir /data/mysql 复制代码 4.移动/复制之前存放数据库目录文件,到新的数据库存放目录位置

cp -R /var/lib/mysql/* /data/mysql/

修改mysql数据库目录权限以及配置文件

chown mysql:mysql -R /data/mysql/

打开/etc下的my.cnf文件

vim /etc/my.cnf

将[mysqld]条目下的datadir和socket这两栏注释掉,并重新改新成你当前的路径,我的是在/home/data/目录下的,以下是我的修改内容供大家参考。

#datadir=/var/lib/mysql datadir=/home/data/mysql #socket=/var/lib/mysql/mysql.sock socket=/home/data/mysql/mysql.sock)

在最后一行新增一个[mysql]的条目,并在下面新增以下内容:

[mysql] socket=/home/data/mysql/mysql.sock

//为什使用pm2,因为node.js其服务的时候关闭服务器之后接口就不能访问了,所以使用了pm2

ln -s /usr/local/node/node-v14.18.1-linux-x64/bin/pm2 /usr/local/bin/pm2

ln: failed to create symbolic link ‘/usr/local/bin/node’: File exists

运行命令时 ln -s /usr/local/node/node-v10.9.0-linux-x64/ben/node /usr/local/bin/node

报这个错

ln: failed to create symbolic link ‘/usr/local/bin/node’: File exists

是因为已经存在了

解析方法有两种

1.删除

/usr/local/bin/node

2.覆盖

ln -sf /usr/local/node/node-v14.18.1-linux-x64/bin/pm2 /usr/local/bin/pm2

pm2 start app.js pm2 list pm2 delete 0

结束服务状态

mysql数据库本地数据导入

服务器运行node app.js报错 Error: listen EADDRINUSE: address already in use :::3000

首先运行netstat -apn|grep 3000查询冲突端口(9898)对应的进程pid

[root@hostname vue_api_server]# netstat -apn|grep 9898 tcp6 0 0 :::3000 :::* LISTEN 32121/node

然后使用kill -9 32121命令关闭该进程:

此时可以正常运行 node app.js

mysql使用方法

//在后端的页面中出现任何错误记得打日志看是什么问题对症下药,不可盲目的使用一些搜索方法,那样是搞自己心态

链接服务器有问题直接打印err,看操作日志

MySql错误 1251 - Client does not support authentication protocol requested by server 解决方案

mysql> alter user 'root'@'localhost' identified with mysql_native_password by '密码'; mysql> flush privileges;

服务起来之后接口还是不通可以使用下变的代码,开启3000 // Linux防火墙开启3000端口

firewall-cmd --add-port=3000/tcp

后端项目已部署上线。

域名解析链接

项目雏形建立

思考自己写程序的意义是什么??只是为了赚钱吗??我觉的写程序是用自己的能力还改变一个这个领域的部分进步,不是只是搬砖来赚钱,为了搬砖而搬砖

下一步是真正打磨自己的博客。

计划:搭建云服务自己的git 、 流水线打包、 快速部署(前后端)