Ubuntu20.04安装mysql8.0

1、查询可用的MySQL版本

查找可安装的mysql

apt-cache search mysql | grep mysql-server

2、下载安装MySQL

安装mysql

sudo apt install mysql-server

安装指定版本的mysql

sudo apt install mysql-server-8.0

3、修改root用户的密码

使用命令mysql登陆

sudo mysql

第一次可使用mysql直接登陆，后需需要带用户名和密码才能登陆

修改root用户本机连接的密码

alter user 'root'@'localhost' identified with mysql_native_password by 'Cpcnet123$%^';

刷新权限

flush privileges;

4、修改root用户为远程登陆

使用root账号登陆

mysql -uroot -p'Cpcnet123$%^'

切换到mysql库

use mysql;

修改root账号可远程连接

update user set host='%' where user='root';

刷新权限

flush privileges;

修改配置文件

sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

将30行左右的bind-address = 127.0.0.1 注释掉

保存配置后重启mysql

sudo systemctl restart mysql

防火墙放行3306端口

sudo ufw allow 3306

5、设置用户只能访问某个数据库权限

创建数据库

CREATE DATABASE miind_sdwan_1;

CREATE DATABASE miind_sdwan_1_5;

创建用户

CREATE USER 'TychonicUser'@'localhost' IDENTIFIED BY 'Cpcnet123$%^';

赋予权限

GRANT ALL PRIVILEGES ON `miind_sdwan_1_5`.* TO 'TychonicUser'@'localhost';

刷新权限

FLUSH PRIVILEGES;

6、设置用户允许远程访问

这里是两个同名同密码的账号

创建用户

CREATE USER 'TychonicUser'@'%' IDENTIFIED BY 'Cpcnet123$%^';

赋予权限

GRANT ALL PRIVILEGES ON `miind_sdwan_1_5`.* TO 'TychonicUser'@'%';

刷新权限

FLUSH PRIVILEGES;

Ubuntu 安装nginx

前置环境安装

sudo apt-get install -y gcc
sudo apt-get install -y libpcre3 libpcre3-dev
sudo apt-get install -y zlib1g zlib1g-dev
sudo apt-get install -y openssl 
sudo apt-get install -y libssl-dev

下载nginx源

wget http://nginx.org/download/nginx-1.21.6.tar.gz

解压

tar -zxvf nginx-1.21.6.tar.gz

进入目录

cd nginx-1.21.6/

执行初始化

./configure --prefix=/usr/local/nginx --conf-path=/usr/local/nginx/conf/nginx.conf --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_flv_module --with-http_gzip_static_module

编译

make
sudo make install

建立link

sudo ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

配置apt-get的下载源

1、复制原文件备份

sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak

2、编辑源列表文件

sudo vim /etc/apt/sources.list

3、将原来的列表删除，添加如下内容

注：jammy为系统版本号，根据不同系统修改不同版本号。

阿里云

deb http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse

清华云

# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy-security main restricted universe multiverse

Ubuntu源

deb http://cn.archive.ubuntu.com/ubuntu/ jammy main restricted
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-updates main restricted
deb http://cn.archive.ubuntu.com/ubuntu/ jammy universe
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-updates universe
deb http://cn.archive.ubuntu.com/ubuntu/ jammy multiverse
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-updates multiverse
deb http://cn.archive.ubuntu.com/ubuntu/ jammy-backports main restricted universe multiverse
deb http://security.ubuntu.com/ubuntu jammy-security main restricted
deb http://security.ubuntu.com/ubuntu jammy-security universe
deb http://security.ubuntu.com/ubuntu jammy-security multiverse

4、运行

sudo apt-get update

5、运行

sudo apt-get upgrade

6、apt-get 常用命令

apt-cache search packagename 搜索包
apt-cache show packagename 获取包的相关信息，如说明、大小、版本等
apt-get install packagename 安装包
apt-get install packagename - - reinstall 重新安装包
apt-get -f install 修复安装"-f = --fix-missing"
apt-get remove packagename 删除包
apt-get remove packagename - - purge 删除包，包括删除配置文件等
apt-get update 更新源
apt-get upgrade 更新已安装的包
apt-get dist-upgrade 升级系统
apt-get dselect-upgrade 使用 dselect 升级
apt-cache depends packagename 了解使用依赖
apt-cache rdepends packagename 是查看该包被哪些包依赖
apt-get build-dep packagename 安装相关的编译环境
apt-get source packagename 下载该包的源代码
apt-get clean 清理无用的包
apt-get autoclean 清理无用的包
apt-get check 检查是否有损坏的依赖

场景： vue-router 路由守卫 跳转前判断 pinia 状态 state的token是否存在 ，存在就跳转，不存在跳转到 登录页面。

科普一：pinia-plugin-persist 的使用

import { createPinia } from "pinia"
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store
复制代码
配置 ：

复制代码
import { defineStore } from "pinia";
export const useUserStore = defineStore({
  id: "user",
  state: () => {
    return {
      token: ""
    };
  },
  actions: {
    setToken(token: string) {
      this.token = token;
    }
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: "your key",
        storage: localStorage,
      },
    ],
  },
});

支持 localStorage，sessionStorage 。

踩的坑：

当配合 路由使用时，持久化 存储失效了

答案：

userStore 初始化 必须放在 路由守卫里 才会生效， 必须放在 路由守卫里 才会生效， 必须放在 路由守卫里 才会生效。放在外面，持久化会失效，记录一下。

import { useUserStore } from '@/stores/user'

{
      path: "/cart",
      name: "Cart",
      component: () =>
          import(/* webpackChunkName: "cart" */ "../views/CartView.vue"),
      beforeEnter:(to, from, next)=>{
      //这里是最关键的，一定要放到前置守卫里面初始化，持久化才生效
        const userStore = useUserStore();
        if( userStore.token ){
          next();
        }else{
          next('/login');
        }
      }

Vue3项目中引入 ElementUI

1.安装

vue3中使用如下命令通过 npm 安装 ECharts（本人项目使用的安装方式）

npm install element-plus --save

也可以使用其他的包管理起进行安装：

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

2.引入

element-plus分为全局引入和按需引入两种方式，一般在工程项目中，由于全局引入会导致不必要的资源加载，为提升项目性能，建议进行按需引入。以下我们对两种引入方式进行介绍。

2.1 全局引入

全局引入就是在项目入口（main.ts）文件直接引入组件以及组件全部的样式文件；代码如下所示：

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2.2 按需引入

在vue3中按需引入ElementUI，需要使用其他的插件辅助，需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件；安装方法如下：

npm install -D unplugin-vue-components unplugin-auto-import

然后再vite或者webpack配置中添加相应的配置，如下所示：

vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})