三分钟搭建一个 web 服务器

发表于 2019-06-27 更新于 2021-04-13 分类于 web 服务器 2.4k 2 分钟

三分钟搭建一个 web 服务器

by 草梅友仁

项目地址https://github.com/CaoMeiYouRen/simple-web-server

上面的打不开可以访问这个地址https://gitee.com/caomeiyouren/simple-web-server

使用

运行以下命令即可，前提是已经安装了 git

git clone https://github.com/CaoMeiYouRen/simple-web-server.git
# github有点卡，如果上不去的话也可以换成下面这个链接
git clone https://gitee.com/caomeiyouren/simple-web-server.git
# 注意以上命令只要运行一个即可

然后继续运行

1 2	npm i #下载依赖 npm run server #运行脚本

运行后可通过 http://127.0.0.1:80 来访问

运行效果

如果不会使用 git 的也可以参考下面的文件目录自己建一个

文件目录

src/ 源代码
- app.js web 服务脚本
- public/ web 服务器根目录
  - index.html
package.json npm 包配置文件

package.json

{
    "name": "simple-web-server",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "server": "node ./src/app.js"
    },
    "author": "CaoMeiYouRen",
    "license": "MIT",
    "dependencies": {
        "express": "^4.16.4"
    }
}

app.js

var express = require("express");
var app = express();//使用express框架
var path = require("path");//这个是node.js自带的路径处理模块
/** 
 * app.use("/", express.static(path.join(__dirname, "public")));
 * app.use("访问路径",express.static("要公开的目录"))
 * 下面这段的意思是通过 域名/xxx 能够访问到 public/xxx 的内容
 * 即将public目录作为静态目录公开
 * path.join(__dirname, "public")能够获取到public的绝对目录
 * 使用绝对目录作为根域名有一个好处就是能够保证找到这个目录，相对目录可能会出错
*/
app.use("/", express.static(path.join(__dirname, "public")));
var http = require("http");//导入http模块
app.get("/", (req, res) => {//当以get方式访问根目录时，返回index.html
    res.sendFile(__dirname + "/public/index.html");
});
let port = 80;//脚本运行端口为80
http.createServer(app).listen(port, () => {
    console.log("HTTP运行端口为 http://127.0.0.1:" + port);
});

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>simple-web-server</title>
    <style>

    </style>
    <script>

    </script>
</head>

<body>
    <h1>HelloWorld</h1>
</body>

</html>

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/fd373c4f.html
版权声明：转载请注明出处！

c#安装 MySQL 驱动以及实现简单的 MySQL 操作

发表于 2019-06-27 更新于 2021-05-12 分类于编程 4.7k 4 分钟

c#安装 MySQL 驱动以及实现简单的 MySQL 操作

by 草梅友仁

一、驱动下载

首先前往 MySql 官网下载驱动。下载地址：https://dev.mysql.com/downloads/connector/net/

注意驱动版本即可。注意：要下载.zip 版本，解压后会看到几个 dll，那个就是需要的驱动

最新的 8.0.16 版本驱动要求.net 版本在 4.5 以上，如果需要 4.0 版本的则需要 6.8.8 版本，选择 4.0 版本驱动即可

由于本人安装的 Visual Studio 2010 最高只支持.net4.0，因此只能使用旧版驱动。不管哪个版本，MySQL 的核心驱动都是 MySql.Data.dll，使用的时候只需要引入这个即可

二、驱动引入

新建一个项目，名称随意。

找到项目位置，在项目根目录下新建 lib 文件夹

将 MySql.Data.dll 复制到该目录下

回到 Visual Studio 2010 中，右键添加添加引用
选择浏览，找到 MySql.Data.dll，选中并点击确定![1559820770276]

三、连接数据库

新建一个 Database.cs 类，并引用 MySql.Data.MySqlClient 类。注意类名前添加 public，否则无法在其他类中调用这个类

写一个初始化方法

public class Database
{
    static MySqlConnection conn;//MySql连接
    const String server = "localhost";//服务器地址
    const String uid = "test";//用户名
    const String pw = "123456";//密码
    const String db = "test";//库名
    /// <summary>
    /// 初始化程序，连接数据库
    /// </summary>
    public static Boolean Init()
    {
        try
        {
            if (conn == null)
            {
                conn = new MySqlConnection("server=" + server + ";user id=" + uid + ";password=" + pw + ";database=" + db);
                conn.Open();
                Console.WriteLine("数据库连接成功");
            }
            return true;
        }
        catch (Exception e)//异常处理
        {
            Console.WriteLine("Exception caught: {0}", e);
            return false;
        }
    }
}

3. 在主程序中调用该方法，观察控制台是否有输出，如果显示“数据库连接成功”则表明数据库连接已成功，操作正确。

四、编写数据库操作辅助类

对数据库的操作有很多重复的内容，因此这些可以像初始化方法这样提取出来。

查询操作

/// <summary>
/// 查询操作，成功返回MySqlDataReader，具体的数据可以从该对象中获取；失败返回null
/// </summary>
public static MySqlDataReader Select(String sql)
{
    try
    {
        Init();
        MySqlCommand command = new MySqlCommand(sql, conn);
        MySqlDataReader data = command.ExecuteReader();//这里返回从数据库获取的数据
        return data;
    }
    catch (Exception e)//注意了，对数据库的操作尤为要注意异常处理，因此直接写在这里即可
    {
        Console.WriteLine("Exception caught: {0}", e);
        return null;
    }
}

增删改操作

/// <summary>
/// 执行一条sql指令，成功返回true，失败返回fasle
/// 事实上
/// </summary>
public static Boolean DbOp(String sql)
{
    try
    {
        Init();
        MySqlCommand command = new MySqlCommand(sql, conn);
        int result = command.ExecuteNonQuery();//这里返回的是受影响的数据条数，如果不为零则表明操作成功
        return result != 0;
    }
    catch (Exception e)
    {
        Console.WriteLine("Exception caught: {0}", e);
        return false;
    }
}

实现字符串的转义

/// <summary>
/// 转义字符串 例如 abc 转为 'abc'
/// </summary>
public static String Escape(Object str)
{
    if (str.GetType() == "".GetType())
    {//是字符串的进行防注入
        return "'" + MySqlHelper.EscapeString(str.ToString()) + "'";//注意，MySQL中表示字符串时一定需要单引号或反引号
    }
    return str.ToString();
}

五、实现简单的增删查改功能

数据表名称：user

字段：id，类型 int；name，类型 text；pw，类型 text

如果要用 sql 语句创建，可参考如下，也可以用可视化工具创建

CREATE TABLE IF NOT EXISTS `user`(
   `id` INT AUTO_INCREMENT PRIMARY KEY,
   `name` TEXT NOT NULL,
   `pw` TEXT NOT NULL
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

在项目中新建一个 User.cs 类，内容如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using MySql.Data.MySqlClient;

namespace MySqlTest
{
    class User
    {
        public int id;//编号
        public String name;//用户名
        public String pw;//密码
        public User()
        {
        }
        public User(MySqlDataReader data)
        {
            this.id = data.GetInt16("id");
            this.name = data.GetString("name");
            this.pw = data.GetString("pw");
        }
        public User(String name, String pw)//注册时需要创建无id的新用户
        {
            this.name = name;
            this.pw = pw;
        }
        public User(int id, String name, String pw)
        {
            this.id = id;
            this.name = name;
            this.pw = pw;
        }
    }
}

实现 user 的查询

 /// <summary>
/// 根据id查找指定用户
/// </summary>
public static User SelectUser(int id)
{
    string sql = "SELECT * from user WHERE id = " + id;
    MySqlDataReader data = Select(sql);//如果出现异常会返回null，需要注意！！
    if (data != null && data.Read())
    {
        User user = new User(data);//由于上面已经在User的的构造函数中写了相关方法，所以这里直接调用即可
        data.Close();
        return user;
    }
    else
    {
        if (data != null) //如果不为空则需要关闭！
        { 
            data.Close(); 
        }
        return null;
    }
}

3.实现 user 的增加

 /// <summary>
/// 创建新用户
/// </summary>
public static User AddUser(User user)
{
    String sql = "INSERT into user(id,name,pw) values(0," + Escape(user.name) + "," + Escape(user.pw)  + ")";
    if (DbOp(sql))
    {
        return SelectUser(user.name);
    }
    else
    {
        return null;
    }
}

4.实现 user 的更新

/// <summary>
/// 修改用户
/// </summary>
public static Boolean UpdateUser(User user)
{
    String sql = "UPDATE user SET name = " + Escape(user.name) + ",pw = " + Escape(user.pw) +  " WHERE id = " + user.id;
    return DbOp(sql);
}

5.实现 user 的删除

/// <summary>
/// 删除用户
/// </summary>
public static Boolean DeleteUser(int id)
{
    String sql = "DELETE from user WHERE id = " + id;
    return DbOp(sql);
}

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/44a0df8f.html
版权声明：转载请注明出处！

三分钟搭建一个 vue-webpack 项目

发表于 2019-05-19 更新于 2021-04-13 分类于 webpack 670 1 分钟

三分钟搭建一个 vue-webpack 项目

by 草梅友仁

项目地址https://github.com/CaoMeiYouRen/simple-vue-webpack

上面的打不开可以访问这个地址https://gitee.com/caomeiyouren/simple-vue-webpack

使用

运行以下命令即可，前提是已经安装了 git

git clone https://github.com/CaoMeiYouRen/simple-vue-webpack.git
# github有点卡，如果上不去的话也可以换成下面这个链接
git clone https://gitee.com/caomeiyouren/simple-vue-webpack.git
# 注意以上命令只要运行一个即可

然后继续运行

npm i #下载依赖
npm run dev  #开发模式，可通过http://127.0.0.1:3000 来访问
npm run build  #生产模式，生成的文件在dist目录下
npm run server  #启用http服务器，可通过http://127.0.0.1:80 来访问
npm run lint:fix   #使用eslint修正风格
npm run uninstall  #移除所有node_modules

运行效果

最后

由于本项目还是有些复杂的，因此建议直接看项目的 readme.md 文件，里面有详细解释

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/377812f1.html
版权声明：转载请注明出处！

npm 的使用

发表于 2019-05-18 更新于 2021-04-13 分类于 npm 715 1 分钟

npm 的使用

by 草梅友仁

参考链接https://www.runoob.com/nodejs/nodejs-npm.html

安装

由于新版的 nodejs 已经集成了 npm，所以之前 npm 也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

npm -v

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：

#Linux
sudo npm install npm -g
#Windows
npm install npm -g

使用 npm 命令安装模块

npm 安装 Node.js 模块语法格式如下：

1	npm install <Module Name>

全局安装与本地安装

1 2	npm install express # 本地安装 npm install express -g # 全局安装

卸载模块

我们可以使用以下命令来卸载 Node.js 模块。

1	npm uninstall express

更新模块

我们可以使用以下命令更新模块：

1	npm update express

搜索模块

使用以下来搜索模块：

1	npm search express

使用淘宝 NPM 镜像

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

1	cnpm install [name]

更多信息可以查阅：http://npm.taobao.org/。

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/bddd47ac.html
版权声明：转载请注明出处！

Visual Studio Code 插件推荐

发表于 2019-05-15 更新于 2021-04-13 分类于 Visual Studio Code 1.5k 1 分钟

Visual Studio Code 插件推荐

by 草梅友仁

参考链接

前言

Visual Studio Code 是一个非常适合用来写前端的编辑器，虽然本体功能简单，但是有着丰富而强大的插件支持，这使得 Visual Studio Code 可以深度自定义，实现你的需求。

插件推荐

那么，下面我就根据自己的使用体验来推荐一些插件。

Auto Close Tag 自动补全 HTML / XML 标签
Auto rename tag 自动重命名配对的 HTML / XML 标签
Auto Complete Tag 前两个插件的整合包
Auto Import 自动导入依赖包
change-case 修改代码命名风格
Chinese (Simplified) Language Pack for Visual Studio Code 中文简体汉化插件，习惯英语界面的也可以不装，英语苦手当然是必备的
Color Highlight 会将颜色代码转换为对应的颜色显示出来，这段代码什么颜色一目了然
Document This 给代码添加注释
DotENV .env 文件支持和格式化
EditorConfig for VS Code 使 vscode 支持 .editorconfig 配置
ESLint 代码检查工具，用于代码风格的检查。团队合作必备
file-peek 可以方便的补全文件路径
Git Graph 可视化 git 分支和提交记录
HTML Snippets HTML 代码片段
IntelliSense for CSS class names in HTML 在 html 文件中提示 css 名称
JavaScript (ES6) code snippets es6 代码块
JavaScript and TypeScript Nightly 启用最新的 Typescript 语法
Markdown All in One 编写 md 文件
Markdown Preview Enhanced 可以把 vscode 当初 md 编辑器来使用，附带预览功能
open-in-browser 给 vscode 加一个右键在默认浏览器打开的快捷键
One Dark Pro 暗色主题。安装了 One Dark Pro 插件后，可以一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加舒适。
stylelint css、scss、less 格式化
Vetur 前端神器，涵盖语法提示到格式化所有功能。也是 vue 框架推荐的插件。
Volar 对 Vue3 + Typescript 进行了专门的优化，注意和 Vetur 功能冲突，装其中一个就好了。如果使用 Typescript 开发，则该插件能提供更多的 Typescript 信息，所以更推荐安装该插件。如果使用 JavaScript 开发，那么效果差不多，都可以
vscode-icons 可以让 vscode 中的文件管理的树目录显示图标，显示图标后会使得文件、文件夹更加明确功能

以上插件在 Visual Studio Code 直接搜索即可~

娱乐向插件推荐

以下插件偏向娱乐性，请在开发中慎用~

小霸王 小霸王是一款基于 vscode 的 nes 游戏插件，能让你在紧张的开发之余在 vscode 里发松身心。通过劳逸结合，提升开发效率。
- 请务必在闲暇时间使用本插件，若是上班摸鱼被发现，后果自负
cloudmusic 网易云音乐插件。在 vscode 中听音乐，实现了播放器的大部分功能。
- 本插件也请务必在闲暇时间使用~
- 注意，如果无法使用本插件例如插件初始化失败，请安装 Visual C++ 2017 后重试。

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/44a0df8f.html
版权声明：转载请注明出处！