深入浅出学习前端开发(环境搭建篇)

前言

这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程.

个人学习方法分享
整体学习路线分享
全栈开发自学笔记 已开源
上文:深入浅出学习前端开发(入门篇)

本文阅读建议
1.一定要辩证的看待本文.
2.准备进行基础的后台环境搭建学习.
3.本文是基于前端学习的后台环境搭建(AMP方向)
4.本文只阐述学习路线和学习当中的重点问题.需要读者自己使用百度进行拓展学习.
5.觉得哪里不妥请在评论留下建议~
6.觉得还行的话就点个小心心鼓励下我吧~

目录
1.概念
2.完整流程
3.Apache服务器
4.PHP脚本语言
5.MySQL数据库

推荐书籍 & 网站推荐

Head First PHP&MySQL

网站:在线文档API查询


概念

开发环境是指搭建后端数据库环境以及服务器脚本语言支持环境.没有这个环境就无法运行服务器脚本语言,操作数据库里的数据.

静态网页&动态网页

静态网页一般是指由纯HTML&CSS构建的网页,不涉及数据存储,不涉及JavaScript,只有一些基础的布局.
没有交互的网页是没有灵魂的,交互的网站一般都要存储数据,那么我们日常生活中经常浏览的网页,都是怎么开发的呢.


完整流程

一个网站的流程,由前端工程师 使用 HTML+CSS+JavaScript 进行开发静态页面+交互效果,由后端工程师 创建并维护 SQL数据库,然后进行本地联调,数据测试.测试完毕后由后端工程师使用Apache 发布网页,并配置相应站点以及域名.

其中根据前端工程师的水平不同,项目需求不同,会使用各种不同的JS库:VueJS,NodeJS,AngularJS,ReactJS,jQuery等,以及框架.

根据后端工程师的水平不同,项目需求不同,会使用MySQL,NoSQL,Oracle等.

服务器与网页交互也因水平不同,可以使用PHP,Java,Python等多种语言进行服务器脚本开发,进行传递数据,数据处理,增删改查.

角色具体分为 网页 服务器 数据库.
技能由浅到深分为各个知识点和技能,详细知识点可以看我的这篇文章<全栈开发学习路线>


服务器

服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。
上面是百度查的,下面说一下个人理解,服务器就是负责承载你网页和数据库以及发布网页发布数据的角色,本质是一台远程计算机.但是想要做到发布网页怎么办,需要用到服务器软件.

服务器软件简介

服务器软件概念请自行百度学习,目前知名的有Nginx、Apache、IIS,因为本人目前学习的事Apache所以暂时不讲其他两个,请自行学习.

Apache

Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一。

角色说明

Apache不是服务器,是一款服务器应用软件,还有Nginx也是同类软件,Apache不仅用来承载网页,更为PHP等服务器脚本语言提供了运行环境.

在本文主要为PHP提供了运行环境,可以运行后缀为PHP的脚本文件,如果没有Apache,计算机/服务器讲不识别PHP文件.


Windows安装

windows用户请自行百度Apache下载以及安装教程.在此不赘述.
因为windows有用户图形界面,则下面指令均是在Mac环境下使用.

流程:安装包=>修改配置文件=>配置环境变量=>每次修改配置文件记得重启Apache

Mac安装

Mac用户是自带Apache的,打开终端,输入apachectl -v回车.确认版本.
然后终端运行

sudo apachectl start 
输入密码,然后访问localhost 显示It works!即为开启成功.
网页目录默认在/Library/WebServer/Documents中

httpd.conf配置

当安装Apache以后,怎么进行使用,httpd.conf就是重点了.
httpd.conf不仅是Apache的主配置文件,还是终端调用的指令.

open /private/etc/apache2/httpd.conf

可以使用编译器SublimeText3或者Vim编辑,我使用的是VSCode进行修改.

解注释以下代码 使apache可以解析php

LoadModule userdir_module libexec/apache2/mod_userdir.so 
LoadModule php5_module libexec/apache2/libphp5.so
Include /private/etc/apache2/extra/httpd-userdir.conf

自定义本地服务器目录

但是每次向默认文件夹拷贝都需要权限,那么可以进行自定义目录.

首先是前往/private/etc/apache2/extra/目录 修改 httpd-userdir.conf
解注释 Include /private/etc/apache2/users/*.conf
前往/private/etc/apache2/users/目录
添加以你的用户名命名的conf
文件内容如下:

<Directory "/Users/dream/Sites/"> // username需要修改
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>
然后就可以实现浏览器访问localhost/~yourname/这个地址访问/Users/dream/Sites/这个文件夹下的网页文件.

httpd_vhost.conf配置

这个文件是用来配置多站点虚拟主机的.
多站点虚拟主机是用来配置不同站点解析到不同IP地址,从而达到一台服务器多个网站,一般在工作中用来绑定子域名等.

首先前往/private/etc/apache2/目录下修改httpd.conf
解注释Include /private/etc/apache2/extra/httpd-vhosts.conf
然后前往/private/etc/apache2/extra/目录下打开httpd-vhosts.conf进行配置

<VirtualHost *:80>
ServerAdmin webmaster@dummy-host2.example.com
DocumentRoot "/usr/docs/dummy-host2.example.com"
ServerName dummy-host2.example.com
ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common
    <Directory "/路径/路径/路径">
        Options indexes
        order Deny,Allow
        Allow From All.
    </Directory>
</VirtualHost>

1.配置域名(服务器名)
ServerName ....com

2.配置站点实际路径

DocumentRoot "目录"

3.设置访问权限

<Directory "路径">
    Options indexes
    order Deny,Allow
    Allow From All.
</Directory>

4.配置邮件地址.(可选)
ServerAdmin 设置一个邮件地址,如果服务器有任何问题将发信到这个地址, 这个地址会在服务器产生的某些页面中出现。

5.ErrorLog.(可选)
错误日志存储地址

6.CustomLog.(可选)
自定义日志存储地址

权限说明

Options:选项,Indexes用于设定当没有网页显示时,是否列出当前目录
AllowOverride:允许覆盖的特性,none表示不允许覆盖,All表示可以覆盖。
Order:表示权限控制顺序,只有两个:
allow, deny 先允许,后拒绝
deny, allow 先拒绝,后允许
Allow from: 允许谁(ip)访问
deny from : 拒绝谁(ip)访问


服务器脚本语言

服务器脚本语言,是运行在服务器环境下,对服务器以及数据库进行操作的语言,是一个网页环境中必不可少的角色.

其中有PHP,Java,Python,Node.js这里目前使用PHP.

PHP

PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。

角色说明

PHP在这里当做一门服务器脚本语言使用,其环境需要更改Apache配置文件才可以支持.

其角色为,在Apache环境下,处理从Apache挂载过来的客户端请求,PHP内置了对MySQL数据库的操作模块,解锁以后,可以根据请求,对数据库进行增删改查操作.


Windows安装

windows用户请自行百度PHP官网下载以及安装教程.在此不赘述.

流程:部署安装包=>在httpd.conf挂载PHP模块=>配置PHP.ini文件=>测试运行php文件

Mac安装

1.前往/private/etc/apache2目录下寻找httpd.conf
2.解注释#LoadModule php7_module libexec/apache2/libphp7.so
注意:php版本根据系统不同而不同.
3.终端执行'sudo cp /etc/php.ini.default /etc/php.ini'
4.终端执行'sudo apachectl restart'
5.将'<?php phpinfo() ?>'内容的php文件放在Apache服务器目录下,测试运行,输出phpinfo界面,php安装成功.

文章推荐:
PHP基础学习笔记总结


数据库

数据库,是网页应用以及移动端应用,俗称"后端"开发,是一个应用的灵魂,一个应用是否强大,和这个应用的后台开发工程师水平有关.后端开发工程师越强大,应用就越强大.

其中有NoSQL,MogoDB,Oracle,SQLServer,这里目前使用MySQL.

MySQL简介

MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件。

角色说明

MySQL是数据库的一种,他拥有增删改查的操作指令,其角色为服务器交互与业务数据的存储.

一个项目是否健壮,功能是否强大都与后端数据库有着紧密的联系.


Windows安装

windows用户请自行百度MySQL官网下载以及安装教程.在此不赘述.

流程:安装MySQL(配置选项较多)=>PHP.ini解锁MySQL.dll文件扩展=>测试使用PHP联结数据库.

Mac安装

两种安装方式:
本文推荐使用brew包管理工具进行安装.
1.终端运行brew install mysql 
2.Error 2002报错:终端运行'mysql.server start'显示Starting MySQL SUCCESS!
3.第一次安装成功后终端执行:'mysql_secure_installation'进行初始配置
/*
I.为root用户设置密码
New password:
Re-enter new password:
2.删除匿名账号
Remove anonymous users? [Y/n]
3.取消root用户远程登录
Disallow root login remotely? [Y/n]
4.删除test库和对test库的访问权限
Remove test database and access to it? [Y/n]
5.刷新授权表使修改生效
Reload privilege tables now? [Y/n]
*/
4.终端运行'mysql -u root -p'回车 输入密码.登录成功

目前正在进行MySQL数据库的学习中,在详细学习以后,我会更新并总结此处.


结束语

如果您对这篇文章有什么意见或者建议,请评论与我讨论.
如果您觉得还不错的话~可以点个喜欢鼓励我哦.
如果您想和我一起学习,请毫不吝啬的私信我吧~
介个是我的个人博客,欢迎参观哦~

推荐阅读更多精彩内容