整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
節課，我們將個人簡介網站編寫完成了。
這節課，要將網站發布到局域網可以訪問。
前面課程里面有講過不同的計算機上有不同的操作系統。
大多數人使用的Windows系統，前面的教程是樹莓派Raspbian系統，學哥常用的是Mac系統。
那么在不同的操作系統上，就可能需要安裝不同的Web服務器程序，來對外提供Web服務。
下面針對2種具體的代表性操作系統，詳細說明應該如何安裝配置Web服務程序。
分別是：Windows7、Raspbian。
Windows系統是使用人數最多的系統，Windows7是比較常用的。
樹莓派電腦是前面課程中很多同學用來學習的電腦，Raspbian系統也可作為Linux的代表性。
下節課將說明如何將網站部署到阿里云的Ubuntu系統服務器上，Ubuntu也是基于Linux的，很多操作步驟和Raspbian類似。
如果有同學使用的是Mac系統，那么可以考慮安裝一個虛擬機程序VMware Fusion，然后在里面安裝一個Windows系統或者Ubuntu系統都可以。具體如何安裝虛擬機程序，不是學哥教程的重點，因此請大家去網上搜索關鍵字“Mac Vmware Fusion Windows”。
學哥推薦phpstudy程序，可以很方便的安裝配置好Web服務程序。
它包含了常見的Web服務程序包括Apache或者Nginx，和PHP，和數據庫MySQL，集成在一起了。
下載地址：http://www.phpstudy.net/phpstudy/phpStudy20161103.zip
將下載好的phpStudy20161103.zip文件移動到C盤根目錄下：
然后，鼠標右鍵單擊，在彈出菜單里面選擇【全部提取(T)...】：
然后，點擊【提取】按鈕，完成之后，看到目錄C:\phpStudy20161103下面出現了幾個文件：
然后，鼠標雙擊文件phpStudy20161103.exe，啟動安裝程序:
修改目標文件夾為C:\phpStudy，點擊OK按鈕，等待解壓完成，出現確認界面：
點擊按鈕【是】，phpStudy程序將啟動，會彈出防火墻確認mysqld畫面：
點擊按鈕【允許訪問】，然后在另外一個彈出防火墻確認Apache HTTP Server畫面：
點擊按鈕【允許訪問】，完成之后，可以看到phpStudy程序已經啟動好了：
看到phpStudy程序的運行狀態里面，Apache和MySQL后面是2個綠燈，則表示Web服務程序環境配置好了。
如果看到有紅燈，則說明可能有問題，這時候就需要排查原因。
一般來說，可能出錯的原因主要是電腦系統里面可能曾經已經安裝過其它Web服務程序，占用了80端口；
或者是已經安裝了MySQL數據庫程序，占用了3306端口。
這時候，解決辦法一般是先刪除其它相關軟件，然后關閉并重新啟動phpStudy程序進行嘗試。
如果還有錯誤，則需要到C:\phpStudy20161103目錄下查看manual.chm文件，里面有關于常見錯誤的解決方案。
今后，在學習PHP和MySQL的時候，還會用到這個Web服務程序phpStudy。
來整理一下，前面的個人簡介網站程序總共有哪些：
index.html
index.css
project1.html
project2.html
images8128.gif
images\appkeys1.png
images\appkeys2.png
images\appkeys3.png
images\back.png
images\back1.jpg
images\background1.jpg
images\coke11.png
images\coke12.png
images\coke13.png
images\coke14.png
總共是3個html文件，1個css文件，1個images目錄，images目錄下有11個圖片文件。
打開“文件資源管理器”程序，找到目錄“C:\phpStudy\WWW”，將4個文件和images目錄復制到這個WWW目錄下：
然后，程序就部署好了，就可以打開瀏覽器訪問啦。
打開Chrome瀏覽器，輸入地址http://localhost/index.html就可以看到個人簡介網站了：
可以看到，這里的localhost就是一個網絡ip，相當于告訴Web服務程序，訪問的是本機。
localhost只有當Web服務程序和瀏覽器客戶端是同一臺機器時才有效。
如果換了另外一臺計算機，輸入http://localhost/index.html就看不到網站了，因為另外一臺計算機上面并沒有運行phpStudy這個Web服務程序，也沒有部署網站。
那么，在局域網的另外一臺計算機上，應該如何通過瀏覽器訪問這個網站呢？
前面課程里有講過，兩臺計算機之間要互相訪問的前提是，存在物理連接，也就是能夠有網絡連接。
也就是2臺計算機通過網絡可以連接在一起。
網絡連接最重要的是知道對方的地址，也就是網絡IP地址。
通過另外一臺計算機來訪問Web服務程序，就必須知道提供Web服務程序的計算機的網絡地址。
在Windows系統里面，可以通過在cmd命令行環境里面輸入命令ipconfig來查看當前計算機的網絡IP地址。
在phpStudy程序所在的計算機上，點擊左下角的【開始】圖標，然后在“搜索程序和文件”這個輸入框中輸入【cmd】，然后按回車鍵，就可以打開cmd.exe程序，在里面輸入命令ipconfig回車，來查看網絡IP地址：
可以看到，“IPv4 地址”對應就是當前計算機的網絡IP地址，學哥這個網絡環境是192.168.36.230。
然后在另外一臺計算機上面，打開Chrome瀏覽器，輸入網址：http://192.168.36.230/index.html，就可以看到網站了：
如果，訪問的地址不正確，或者兩個計算機并沒有網絡連通，可能就看不到網站了，這時候就需要檢查網絡。
可以在另外一臺計算機上面通過在cmd命令行環境輸入ping 192.168.36.230來測試是否能夠網絡連通：
如果看到回復的文字里面有，時間<x秒的信息，就說明是網絡連通的。
如果看到請求超時的信息，就說明網絡是不通的。這時候就要去檢查網絡連接或者路由器設置等等。
打開樹莓派電腦的程序“LX終端”，按次序輸入以下命令：
安裝和啟動nginx服務程序:
$sudo apt-get update
$sudo apt-get install -y nginx
$sudo /etc/init.d/nginx start
然后在樹莓派電腦上打開【Chromium網頁瀏覽器】，輸入網址：http://localhost，可以看到如下的效果：
說明nginx這個Web服務程序安裝和啟動好了。
如果是在樹莓派電腦上編寫的個人簡介網站程序，那么程序應該是在/home/pi這個目錄下。
將前面說明的4個文件和images目錄復制到/var/www/html目錄下：
然后在樹莓派電腦上打開【Chromium網頁瀏覽器】，輸入網址：http://localhost/index.html，可以看到如下的效果：
如果不是在樹莓派電腦上編寫的個人簡介網站程序，但是又想將網站部署到樹莓派電腦上，那么就需要利用ftp軟件工具將程序代碼上傳到樹莓派電腦上，這個可以參考第1章的課程，如何上傳文件。
如果是要在另外一臺計算機上面訪問樹莓派電腦作為主機的網站，則需要知道樹莓派電腦的IP地址。
可以在樹莓派電腦的“LX終端”里面輸入命令ifconfig來查詢樹莓派電腦的IP地址：
然后在另外一臺計算機上面訪問: http://192.168.5.109/index.html，類似訪問前面Windows電腦上部署的網站一樣的。
網站程序部署好了之后，就可以在另外的計算機上通過瀏覽器來進行測試了。
一般為了保證讓盡可能多人可以正常訪問我們部署的網站，需要在常用的一些瀏覽器程序上進行測試。
例如：IE瀏覽器，Edge瀏覽器，Chrome瀏覽器，Safari瀏覽器，Firefox瀏覽器。
在另外的計算機上安裝好這些瀏覽器，然后輸入網站地址，分別進行測試每一個頁面，確保顯示效果都是符合預期的。
這里課程的主要目的還是講解編程，關于測試就不深入講解了，等大家如果從事IT行業之后再進行深入學習。
準備好100元錢放在支付寶里面，用于購買阿里云網站服務器。
因為教程是系列教程，前后關聯性非常強，請大家按照微信公眾號【零基礎學編程】的歷史消息發布時間先后次序進行閱讀。
在前端開發領域某些特性下需要依賴HTTPS，例如：navigator.geolocation.getCurrentPosition / new Notification 等。
由于大多數開發環境中都只是HTTP協議下，所以會導致調試比較困難， 這個時候就需要給本地配置HTTPS了。
給本地配置SSL證書一般情況下都是自己 生成自簽名CA證書 , 這種方式最大的問題就是無法建立安全， 然而這樣并沒有什么卵用。
為了解決這個問題, 這里使用了 mkcert。
mkcert是一個簡單的零配置工具，可以使用您喜歡的任何名稱制作本地可信賴的SSL開發證書，是Google某位工程師用Go開發出來的。
Mac用戶
brew install mkcert brew install nss
Windows用戶
前提先安裝 Chocolatey
choco install mkcert
mkcert自動在系統根存儲中創建并安裝本地CA
mkcert -install
每個域名以空格進行分割，下面3個本地域名基本是能夠滿足大部分場景的，除非使用IP
mkcert localhost 127.0.0.1 ::1
會在當前目錄下生成2個文件，生成的證書有效期是10年，足夠用了，并且可以給本地所有端口使用，所以只生成一次即可。
有了證書之后就是配置的事情了，相當簡單：
nginx
server {
listen 7777;
server_name localhost;
ssl on;
root html;
index index.html index.htm;
# 把生成的證書路徑引入進來即可
ssl_certificate ../localhost+2.pem;
ssl_certificate_key ../localhost+2-key.pem;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /www;
index index.html index.htm;
}
}
node.js
Node不使用系統根存儲，因此它不會自動接受mkcert證書。必須設置 NODE_EXTRA_CA_CERTS 環境變量:
export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"
const https=require('https');
const fs=require('fs');
const options={
key: fs.readFileSync('../localhost+2.pem'),
cert: fs.readFileSync('../localhost+2-key.pem')
};
https.createServer(options, (req, res)=> {
res.writeHead(200);
res.end('hello world\n');
}).listen(8000);
生成的證書只能用于本地測試，不要在線上使用。
目前幾乎所有的網站都開啟了SSL，為了使自己在開發中方便調試，建議本地配置上，只是2分鐘的事情。
一篇文章我給大家說明了如何從零開始搭建一個node的服務端框架，我們用到了Egg框架。Egg框架我不再過多介紹，如果有小伙伴想了解，可以回去看我以前寫的文章，會有相關的介紹。這次我將在上次搭建的框架上進行延伸，講一下如果用Egg框架連接數據庫，并且實現對數據的增刪查改。接下來我們直接進入主題。
我本次選用的數據庫是MySQL。所以我們安裝Egg官方的數據庫插件即可，首先我們安裝插件 egg-mysql 。我們在項目根目錄打開命令提示符，輸入命令行：npm i --save egg-mysql 。回車等待插件下載安裝完成。
npm i --save egg-mysql命令行下載安裝插件完成后，我們下一步的工作就是在項目中開啟并配置egg-mysql插件。具體操作如下：
首先我們要在項目中開啟數據庫。找到項目中的/config/plugin.js文件我們需要在里面添加幾行代碼，如下所示。
//開啟數據庫插件
mysql : {
enable: true,
package: 'egg-mysql',
}然后我們還要在 config/config.default.js 中配置各個環境的數據庫連接信息。具體配置如下。
//添加數據庫連接信息
config.mysql={
// 單數據庫信息配置
client: {
// host
host: 'localhost',
// 端口號
port: '3306',
// 用戶名
user: 'root',
// 密碼
password: '123456',
// 數據庫名
database: 'testdb',
},
// 是否加載到 app 上，默認開啟
app: true,
// 是否加載到 agent 上，默認關閉
agent: false,
};到此步驟我們的數據庫插件已經安裝完成并且配置好了。那我們怎么實現數據的增刪查改呢？大家請繼續往下看。
首先我們看一下怎么新增數據。我們在mysql的testdb實例中新建一個user空表。如下圖所示。
我們的egg框架也遵循MVC的架構所以我們一般會在service層里面寫我們邏輯處理的代碼，而controller層則是獲取前端數據，回傳數據的控制層。所以我們操作數據庫的代碼是寫在service文件夾里面的。
我們在app/service文件夾里面新建一個user.js文件。在里面寫個新增用戶的方法，該方法就是把數據存到數據庫中。具體代碼如下。
const Service=require('egg').Service;
class UserService extends Service {
//新增用戶data是有controller層傳遞過來的數據記錄。
async addUser(data) {
const {ctx, app}=this;
let result={};
try {
data.id=0;//定義id=0，因為數據庫已經設置id為主鍵，并且自增。所以只需要賦值0即可。
// 在 user 表中，插入前端提交上來的數據記錄
const info=await app.mysql.insert('user', data);
//插入成功后。
if(info.affectedRows===1){
//給前端返回一個Json的對象
result={
state: 0, //自定義的狀態碼
msg: "添加成功", //返回的消息
data: info.insertId, //新增的記錄的id
}
}
} catch (err) {
//插入數據失敗的返回結果
result={
state: 1,
msg: err,
data: null,
}
}
return result
}
};
module.exports=UserService;然后我們在app/controller文件夾里新建一個user.js文件。在這里我們需要獲取前端提交上來的數據，并且將數據處理的結果返回給前端。具體代碼如下。
'use strict';
const Controller=require('egg').Controller;
/**
* @Controller 用戶管理
*/
class UserController extends Controller {
/**
* @summary 新增用戶
* @router post /user/add
* @request body userAddRequest
* @response 200
*/
async addUser() {
const { ctx }=this;
//通過ctx.request.body的方式，可以獲取到前端post方式提交上來的數據
const data=ctx.request.body;
//調用service層的addUser方法。并且返回相應的結果
const userInfo=await ctx.service.user.addUser(data);
//向前端接口響應數據。
ctx.body=userInfo;
}
}
module.exports=UserController;最后我們定義一個路由，讓前端請求訪問此路由。框架會監聽路由是否被訪問，如果被訪問了則會調用我們定義在controller層的新增用戶的方法。我們在app/router.js文件中添加如下代碼，即可完成路由的定義。
//新增用戶路由
router.post('/user/add', controller.user.addUser);完成這步驟后，我們一個新增用戶的功能就已經完成了。接下里我們就測試一下它的實際效果。我們運行命令：npm run dev。啟動項目，然后打開網頁http://127.0.0.1:7001，可以直接在swagger-ui.html頁面中進行測試。結果如下圖所示。
經過測試，數據已經添加完成。所以數據庫連接也是正常的。
本次分享暫時先告一段落。請各位小伙伴抬起你們發財的小手，點個贊唄。下次我將會進行和大家分享對數據查改刪的方法。關注我！！！更多精彩分享不迷路。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
