前端学习后端步骤

裸辞之后 当了网管 想着有空之余进行学习一下 缓解自己的精神内耗

我想自己写一套系统 包括(前端 后端)  然后部署到某云的服务器上 想着自己走一遍流程 用博客记录一下学习进程

1.配置mysql

 这里我找了很多资料 因为我自己之前装过mysql 可能造成污染了 所以得清空一下之前的数据

配置之前的准备工作

1.清空mysql注册表

2.卸载mysql程序(这里可能会遇到一个‘MySQL Connector NET’无法卸载)解决方案卸载MySQL Connector NET无法卸载_阿香学编程.的博客-优快云博客

然后就可以进行下载安装了

有一个博主写的很详细 用的是自定义的安装 这里就转载一下地址 (因为sql 的 33版本之上没有developer default这个默认配置)https://www.cnblogs.com/soloversion/p/16089662.html

2.装一个navicat(这个自行搜索哈)

3.使用navicat创建数据库与一些命令

这里转载一下大哥的文章 Navicat 创建数据库和表之使用命令创建_native建表-优快云博客

4.写一个简单的node接口

1.盘里面 新建一个文件夹 然后在这里面输入cmd   然后打开之后执行 npm init

这里要输入一个项目名

我起的名字叫study_server

然后就一直回车就完事儿

可以看到已经新建完成了

然后就用vscode或者别的打开

安装一些插件

这里我安装的express(用于编写接口) cors(解决跨域)  mysql(连接数据库)

使用npm或者别的进行安装即可

然后使用代码如下

然后一些数据库的操作也在里面

//引入 express
const express = require('express');
const app = express();

//引入 cors
const cors = require('cors');
app.use(cors());

//引入body-parser
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

//引入mysql
const mysql = require('mysql');
const conn = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'zfs123',
    database: 'test02',
    multiplesStatements: true,
});
conn.connect();

conn.query('SELECT 1 + 1 AS solution', function (error, results, fields) {
    if (error) throw error;
    console.log('The solution is: ', results[0].solution);
});
// websites 表名字
var sql = 'SELECT * FROM websites';
//-----------------------------------------------------------------------------------------查询 数据库
conn.query(sql, function (err, result) {
    if (err) {
        console.log('[SELECT ERROR] - ', err.message);
        return;
    }
    console.log('--------------------------SELECT----------------------------');
    console.log(result);
    console.log('------------------------------------------------------------\n\n');
});

var addSql = 'INSERT INTO websites(Id,name,url,alexa,country) VALUES(0,?,?,?,?)';
var addSqlParams = ['菜鸟工具', 'https://c.runoob.com', '23453', 'CN'];

//----------------------------------------------------------------------------------------- 新增
// conn.query(addSql, addSqlParams, function (err, result) {
//     if (err) {
//         console.log('[INSERT ERROR] - ', err.message);
//         return;
//     }

//     console.log('--------------------------INSERT----------------------------');
//     //console.log('INSERT ID:',result.insertId);
//     console.log('INSERT ID:', result);
//     console.log('-----------------------------------------------------------------\n\n');
// });

// -----------------------------------------------------------------------------------------修改
// var modSql = 'UPDATE websites SET name = ?,url = ? WHERE Id = ?';
// var modSqlParams = ['123123', 'https://m.runoob.com', 6];
// conn.query(modSql, modSqlParams, function (err, result) {
//     if (err) {
//         console.log('[UPDATE ERROR] - ', err.message);
//         return;
//     }
//     console.log('--------------------------UPDATE----------------------------');
//     console.log('UPDATE affectedRows', result.affectedRows);
//     console.log('-----------------------------------------------------------------\n\n');
// });

var delSql = 'DELETE FROM websites where id=7';
//-----------------------------------------------------------------------------------------删
conn.query(delSql, function (err, result) {
    if (err) {
        console.log('[DELETE ERROR] - ', err.message);
        return;
    }

    console.log('--------------------------DELETE----------------------------');
    console.log('DELETE affectedRows', result.affectedRows);
    console.log('-----------------------------------------------------------------\n\n');
});
conn.end();
//监听端口
app.listen(8080, () => {
    console.log('------------------服务启动--------------');
});
// app.get('/' , (req , res) =>{
//     res.send('<p style="color:red">服务已经启动</p>>')
// })
//
// app.get('/api/getUserList' , (req , res) =>{
//     const sqlStr = 'SELECT * FROM user'
//     conn.query(sqlStr , (error , results) =>{
//         if(error){
//             return res.json({code : 10001 , message : error})
//             res.json({code : 10000 , message : results})
//         }
//     })
// })

// 定义一个get接口
app.get('/obj', (req, res) => {
    res.send({
        name: '孙悟空',
        age: 99,
    });
});

// listen()端口监听
app.listen(520, (err) => {
    if (!err) {
        console.log('服务器启动成功了');
    }
});

目前学习至此

后面解决我自己的疑问

执行node文件也就是 node index.js(自己定义的js文件名字)在接口里面对数据库进行操作

怎么配置localhost改为线上 也就是在某云的服务器上部署 然后前端能够接收到 

目前先走一套这个流程  欢迎大家进行指导以及更正 嘻嘻

### 后端开发人员转向前端的最佳学习路径 后端开发者向前端转型的过程中,需要掌握一系列技能和技术栈。以下是基于现有资料以及行业实践总结的一条清晰的学习路径。 #### 1. **HTML 和 CSS** 作为前端的基础,理解 HTML 和 CSS 是必不可少的第一步。这包括但不限于语义化的标签使用、响应式布局的设计方法(如 Flexbox 和 Grid),以及如何通过 CSS 实现复杂的样式效果[^3]。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="container">Centered Content</div> </body> </html> ``` #### 2. **JavaScript 基础** 深入学习 JavaScript 的核心概念,比如变量作用域、闭包、原型链等高级特性。同时熟悉 ES6+ 新增的功能,例如箭头函数、模板字符串、解构赋值等内容也是至关重要的[^4]。 ```javascript const user = { name: 'Alice', age: 25 }; const { name, age } = user; // 解构对象属性 console.log(`${name} is ${age} years old.`); ``` #### 3. **版本控制系统 Git** 熟练运用 Git 进行代码管理与协作是非常必要的能力之一。可以通过实际操作练习来加深记忆,例如克隆仓库、提交更改、解决冲突等问题[^2]。 ```bash git clone https://github.com/example/repo.git git add . git commit -m "Initial Commit" git push origin main ``` #### 4. **前端框架 (React/Vue/Angular)** 选择一种主流的前端框架进行系统性的学习非常重要。无论是 React 中的状态管理和组件化思想还是 Vue 提供的数据绑定机制都能极大地提升工作效率[^1]。 #### 5. **状态管理库 Redux 或 Vuex** 当应用规模增大时,全局状态管理变得尤为重要。了解并实现简单的状态管理模式有助于构建更加复杂的应用程序结构[^4]。 #### 6. **API 调用与数据交互** 学会利用 Fetch API 或 Axios 库发起网络请求并与服务器端交换信息是一项基本功。此外还需要懂得处理跨域资源共享(CORS)策略等相关知识点[^5]。 ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); console.log(data); } catch(err){ console.error('Fetch failed:', err.message); } } fetchData(); ``` #### 7. **测试驱动开发 TDD/BDD** 编写单元测试和集成测试能够有效提高软件质量。Jest 和 Cypress 是两个非常流行的用于前端项目的自动化测试工具[^3]。 --- ### 学习资源推荐 - GitHub 开发者路线图提供了全面的技术成长指南:[GitHub - kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)[^2] - B站视频教程涵盖了从前到后的完整知识体系讲解:[Bilibili 教程链接](https://www.bilibili.com/video/BV18o4y1Z7pj)[^4] ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值