Linux简单全栈项目，原生js+express+MySQL

回向明
231 阅读2分钟

安装VMware，CentOS，Xshell，Xftp

  1. VMware链接：pan.baidu.com/s/11A_WcpMP… 提取码：2023
  2. Xshell和Xftp下载：www.xshell.com/zh/free-for…

配置虚拟机网络

  • 启动CentOS，输入用户名和密码
  • 配置网卡 echo ONBOOT=yes >> /etc/sysconfig/network-scripts/ifcfg-ens33
  • 重启虚拟机。
  • 查看ip地址 ip addr。出现下图的ip地址则配置成功。如果没出现，打开VMware>编辑>虚拟网络编辑器。查看子网ip，需要保证和本机的ip属于同一个网段 image.png

Xshell连接虚拟机

文件>新建>主机号输入虚拟机的ip地址>用户验证里输入用户名（root）和密码

创建html页面

  • 设置开机关闭防火墙 systemctl disable firewalld.service
  • 安装httpd yum install httpd
  • 启动httpd服务 systemctl start httpd
  • 在电脑创建好index.html文件，用Xftp把文件传输到/var/www/html下。也可以用Xshell进入目录 cd /var/www/html，然后手动创建文件
  • 浏览器输入虚拟机的ip地址，即可看到页面

创建数据库

  • 下载官方mysql包 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm
  • 安装MySQL包 yum -y install mysql57-community-release-el7-10.noarch.rpm
  • 安装MySQL yum -y install mysql-community-server
  • 启动MySQ服务 systemctl start mysqld.service
  • 查看初始密码 grep 'password' /var/log/mysqld.log
  • 进入数据库命令行 mysql -u root -p，输入密码
  • 创建数据库 create database test;
  • 使用数据库 use test;
  • 设置连接数据库权限 update user set host='%' where user='root';
  • 刷新权限 FLUSH PRIVILEGES;
  • 创建表 create table tb_user (id int, name varchar(20), age int) default character set utf8;
  • 插入数据 insert into tb_user (id, name, age) values (1, '张三', 24), (2, '李四', 18);

创建Node服务

  • 安装Nodejs yum install nodejs
  • 随便找地方创建js文件夹
  • 进入文件夹
  • 安装express npm install express --save
  • 安装mysql插件 npm install mysql --save
  • 电脑创建1.js文件，通过Xftp放到文件夹里。
const express = require('express');
const mysql = require('mysql');
const app = express();
let obj;
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '数据库密码', 
  database: 'test' // 数据库名字
});
connection.connect();
connection.query('SELECT * from tb_user', function (err, data) {
  if (err) {
    console.log(err);
    return;
  };
  obj = data
});
connection.end();
app.get('/', (req, res) => {
  res.header("Access-Control-Allow-Origin", '*') // 3000端口与80端口跨域，设置允许跨域
  res.send(obj)
})
app.listen(3000, () => {
  console.log('服务器已启动!');
})
  • 启动node服务 node 1.js
  • 3000端口被占用解决方式：
  1. 查看占用3000端口的进程 netstat -anp | grep 3000
  2. 关掉进程 kill -9 进程号

修改html文件

<html>
<script>
  fetch('http://192.168.18.128:3000').then(res => res.text()).then(res => {
    const string = JSON.parse(res).reduce((pre, item) => {
      let str = `<tr>
          <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.age}</td>
        </tr>`
      return pre + str
    }, '')
    document.getElementById('name').innerHTML = `<table>
        <tr>
          <th>id</th>
          <th>名字</th>
          <th>年龄</th>
        </tr>
        ${string}
      </table>`
  })
</script>

<body>
  <div id="name">
  </div>
</body>

</html>
avatar
文章
阅读
粉丝