B/S笔记

BS
计算机入门及方向
Publish Date:   2021-04-18
Update Date:   2022-02-22
Word Count:   2.1k
Read Count:  

Course Link: https://www.yuque.com/books/share/ddbdba56-dc9f-4997-9e18-d9e69309d343/ii1eba

1.软件架构

B/S 架构软件 —— 我们所有的东西都希望通过网站的形式使用，而不依赖于任何其他第三方环境，且依赖于浏览器的应用

系统软件

  • 操作系统、驱动程序等

  • C/C++

C/S架构

  • 桌面应用

  • client 客户端 server 服务端

  • C/C++ C# QT

​ eg： WPS UWP软件(windows store) Adobe

B/S架构

  • 开发网站

  • browser 浏览器 server 服务端

  • 分类

    • 1.前端 HTML CSS JavaScript
    • 2.后端 Java Python PHP Node Golang

​ eg：Web程序(tb jd bilibili baidu… ) “小程序”(mini program)

PS.移动端

  • Android Java–>Kotlin

  • IOS Object-c

2. 开发B/S架构软件需要哪些人才？

前端

后端

测试

运维 —— 管服务器、管部署

产品经理（PM）

首席技术官CTO【技术岗最高职位】（可能没有）

架构师【技术岗次高职位】

3. 前端准备

VS Code

Google Chrome

Node.js

设置淘宝镜像命令：

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

Yarn（可选）

PS：如果你要安装它，前提是必须安装Node.js

运行以下命令安装Yarn（新版本）

npm install --global yarn

查看当前镜像源

yarn config get registry

修改淘宝镜像

yarn config set registry https://registry.npm.taobao.org/

4. 前端预备课

学习指路☛MDN前端文档

HTML —— 定义网页内容的含义和结构

HTML（超文本标记语言——Hyper Text Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。

CSS —— 网页的表现与展示效果

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML) 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

JavaScript (JS) —— 网页的功能与行为

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat)。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JS 框架

jQuery Vue React

CSS 框架

Bootstrap Element UI

5. 后端预备课

VMware 虚拟机

学习指路☛https://www.bilibili.com/video/BV1t741167UB

  1. 虚拟、安全性 —— 与本机独立，虚拟化的一个系统

  2. 随意性 —— 可以把软件拖来拖去

  3. 快捷快照 —— 快速恢复到原来状态

VMware Workstation

https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html

win10官方镜像网站

https://www.microsoft.com/zh-cn/software-download/windows10/

Ctrl + Alt 释放鼠标，回到真实机

# 备忘录——这台电脑用来学习的Ubuntu Server虚拟机
# ip
~$ ifconfig
# login
login as:frank
pswd:123456

Linux基础

vim shell

Android 小米 OPPO 华为 VIVO … 基于

Linux CentOS RedHat Ubuntu Kali …

运维需要精通

注：搜索Ubuntu 的问题一定要带上版本号 （eg.16.04/18.04）

阿里镜像源：https://mirrors.aliyun.com/ubuntu/

  • 拿到系统先更新

    sudo apt-get update

  • 设置root密码

    sudo passwd root

  • 小火车试运行：sl

    sudo apt install sl
sl

  • 其他操作

    Ctrl+L # 清屏
Ctrl+U # 清行
ls -a # 查看隐藏文件

  • 安装必要软件

    sudo apt-get install openssh-server

SSH连接

  • 本质——传输命令

    eg：在Putty中输入ls命令，通过SSH协议连接到ubuntu虚拟机，执行ls命令，然后返回结果给Putty

  • SSH连接

    ssh id@xxx.xxx.x.x(IP)

  • 公司不会给你暴露IP地址，但会给你密钥，你离职时会删除

  • 推荐：XShell 功能更强，但是要钱；我们用的是Putty。

Linux中：粘贴 == 右键单击

代码怎么放到网站上？

  • 文件传输 基于FTP协议

    1. 部署到GitHub等代码管理上（如Git）【现在都用这个】
    2. FTP传输

  • 查看IP

    ifconfig

  • 查看内存（-m 以MB为单位 ~代表用户目录）

    free -m

  • 补全命令 —— tab键

  • 进入工程文件夹

    vim .

Linux中安装软件举例

  • 安装nodejs

    sudo apt-get install nodejs

  • 安装yarn —— “安全+可靠+快”的包管理器（基于npm)

    1. 第一步——配置仓库

      curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

    2. 第二步——安装

      sudo apt-get update && sudo apt-get install yarn

    3. 第三步——检查

      yarn -v

    4. 配置

      yarn config set registry https://registry.yarnpkg.com

  • 安装pm2

    yarn global add pm2

后端语言：Java/Go/Nodejs/C#(.NET)/Python/PHP

JSP –> 在html里面扩展java代码 eg: <%for…%>

前后端兼有，不利于业务拓展

  • 现在已经前后端分离

HTTP服务器搭建软件：Tomcat/Nginx/Apache

  • 比如Tomcat，给某个IP开放一个端口（8080）

  • 下面两者都是3000！

Express的搭建

  • 基于 Node.js 平台，快速、开放、极简的 Web 开发框架
yarn init
git init
yarn add express # 安装
touch app.js # 复制helloworld代码
node app.js # 启动服务
# 在app.js中app.get()上添加：app.use(express.static('public'));
mkdir public
cd public~$ vim hello.html # 随便写个静态网页~$ cd ..~$ node app.js # 启动服务，进入/public，就看的到了

PM2

  • PM2是一个进程管理工具，可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能

    sudo yarn global add pm2# 进入目标工程文件夹下
pm2 start app.js # 启动服务，可以在同个工程下页面间互相链接了

  • 区别

    • node app.js 只是短暂开启服务，而且没有优化
    • pm2 start app.js 只要服务器不关，就一直开着，还有优化

  • PS：买服务器–>公网IP: 网站所有人都能打开

​ 备案+买域名–>DNS服务器解析（作用：将IP+port端口转化为域名：www.xxx.com）

数据库：MySQL/Oracle/SQL Server/SQLite/MongoDB/Redis

T-SQL： MySQL/Oracle/SQL Server/SQLite，NO-SQL： MongoDB/Redis

  • 背景：因为我们前面搭的都是静态页面——无数据交互！

  • 动态页面 ：和用户之间具有数据交互，即对数据的增删改查(CRUD,create read update delete)

  • How？

    将数据存到txt中，纯属扯淡！！！

    存到excel中，稍好一点…至少有“表”了！但是过于庞大…

    更好的就是数据库！它本身也是有单独数据类型的，小数计算没有偏差，本质也是个文件。一个库相当于好多个excel表。

  • Recommend

    初学者学一个T-SQL和一个NO-SQL： MySQL和Redis

    版本推荐：MySQL 5.7

    下载链接：https://dev.mysql.com/downloads/mysql/5.7.html

    Linux下安装配置：https://blog.csdn.net/weixx3/article/details/80782479

    PS. 不懂的话，安装时按照Developer Default即可。

    ​ 切记！用后端语言去驱动！

    ​ 推荐图形化界面：Navicat（windows远程连接linux中的mysql）https://www.navicat.com.cn/

    ​ 推荐框架：ORM（@注释搞定，不用写sql语句，帮你执行sql，）https://typeorm.io/#/

剩下的东西，水到渠成

MVC模式

model 模型

service 层

controller 控制器

HTTP API

TCP UDP

计算机网络

6. Git

开发人员：Linux作者（用C写的）

  1. 版本控制 —— 保留了一切的历史 可以让代码迅速恢复到你想指定的commit位置

    version1 2 3（比如3有bug，回滚回2）【时光穿梭】

  2. 协作开发 —— 需要网络

    在自己的电脑上使用git，那确实是有版本控制功能，没有协作开发功能

    大家把每次写的东西放到哪？ 基于Git的一个平台—— GitHub，GitLab，码云(Gitee)

  3. 如何放在Linux上部署运行？网站是怎么运行的？

    过程：各自开发，git push上传——测试成功，git合并——架构师那跑成了，git pull更新

7. 全栈

  • 全栈工程师是指掌握多种技能，胜任前端与后端，能利用多种技能独立完成产品的人。[Baidu Wikipedia]

8. DevOps

  • DevOps（Development和Operations的组合词）是一种重视“软件开发人员（Dev）”和“IT运维技术人员（Ops）”之间沟通合作的文化、运动或惯例。[Wikipedia]
  • 开发+质量检测+技术运营

9. GitHub

  • 最好的程序猿网站

  • git克隆（尽量别直接Download）

    git clone url

10. 注意休息， 尽可能不要透支身体

总结：本文是B/S预备方向课程笔记，偏向方向了解，由于记录时间较早，排版和格式较一般。

如果对未来方向比较迷茫，想查看详细内容，可以点击文首课程链接了解。

Author: Frank Lee
Link: https://forest-lee.github.io/2021/04/18/BS-notes/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Frank Lee !
BS
赏
评论
  TOC