当你的才华
还撑不起你的野心时,那你就应该静下心来学习

了解一个网站的部署与运行机制

birdjiujiu阅读(646)

了解一个网站的部署与运行机制


我们使用市场上最常见的LNMP架构(本实验所用Linux环境为kali),搭建一个开源的博客程序wordpress,通过这个过程来让大家了解网站的部署和运行。

  1. 先来说说什么是LNMP架构LNMP分别LinuxNginxMySQLPHP四个单词的缩写。分别指的是Linux系统Web服务Nginx软件MySQL数据库系统PHP编程语言

    • Linux就不用多解释了,Kali便是一个Linux系统。接下来我们看下Nginx, Nginx在Kali系统自带有了,如果没有的话,在命令行下执行一条 apt install nginx 命令便可安装

    • nginx的一些目录信息如下

      /etc/nginx/配置文件夹/usr/share/nginx/默认显示页面路径/usr/lib/nginx/模块依赖路径/usr/sbin/nginx可执行文件 启动nginx的命令是service nginx start在启动nginx之后,打开浏览器访问127.0.0.1 应该能看到如下输出

  1. 如果你有一些服务端知识经验,可能看到这个页面会疑惑,是不是什么地方错了,为什么这里显示的是apache服务器的页面

    • 这时候我们先看一看nginx的默认配置文件,打开 /etc/nginx/nginx.conf, 可以发现访问日志和错误日志的路径分别是

      access_log /var/log/nginx/access.log;

      error_log /var/log/nginx/error.log;

      接着我们去查看访问日志 tail -f /var/log/nginx/access.log 然后浏览器刷新一下,看到了新访问记录,就可以证明现在运行的确是nginx.

    • 看完了nginx,我们来看下mysql

      同样的,Kali也自带了mysql服务器。直接service mysql start就可以启动,默认没有密码如果你的kali没有,那么可以运行命令 apt install default-mysql-server 进行安装(屏幕当前启动mysql)

      • 我们连接mysql看一下,运行命令mysql -u root可以看到直接进来了

      • 不用输入密码为了方便后续的使用,我们先给root账户设置一个密码,因为kali内置的mysql有些特殊,所以要用下面的命令来修改密码,这里我把密码修改为123456

        GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' IDENTIFIED BY '123456' WITH GRANT OPTION;flush privileges; 因为Kali版本和MySQL版本的原因,上面的修改密码命令可能不能正确的执行。遇到这种情况时,你可以Google uninstall mysql,找到一个方式将MySQL从你的kali上移除。 改完之后ctrl + c退出mysql接着用 mysql -u root -p 连接mysql,输入密码就可以进去了

    • show databases; 可以看到mysql里有3个数据库,其实这都是默认自带的,不要直接删除和修改。对于MySQL,暂时我们就只需要了解这么多。在学习Web安全的过程中,如果有遇到其他需要对MySQL知道更多的时候,我们会在后续的课程中,与大家分享。

  1. 了解PHP和LNMP架构的网站部署我们来看下PHP

    • Kali作为对Web安全研究友好的系统,自带有PHP环境,我们输入php -v就可以得知自带的php版本是php7.2

    • 但是,kali只默认安装了php cli环境,并没有自带php-fpm组件,php-fpm是搭建web系统常用的一个组件,需要我们输入 apt install php7.2-fpm进行安装

    • 在安装完毕后,只需要输入 service php7.2-fpm start 便可以启动了和nginx一样,配置文件放在/etc/下,具体是/etc/php/7.2/由于我们现在使用的是php的fpm模式,所以主要看fpm下的配置 这里就不再详细说php的一些细节了,根据经验分析出fpm本身的配置在 /etc/php/7.2/fpm/pool.d/www.conf 文件里,而该文件开始位置的。

    • listen = /run/php/php7.2-fpm.sock

      这段配置说明fpm现在用的是以UNIX Domain Socket的形式在监听,其它应用可以通过这个文件和php-fpm通讯,这行配置需要记住

    • 还有一个要记住的配置是user = www-datagroup = www-data

      这段配置是说明php-fpm是以用户组www-data的用户www-data运行的,这样做是为了限定php-fpm的权限,这样当php应用程序有漏洞的时候,对服务器的影响有所降低,起码不会是root级别的影响。

    • 然后找一下日志相关的配置,在今后的使用中,我们可能经常需要打开日志,方便排错 # access.log = log/$pool.access.logaccess.log 是访问php-fpm组件的日志,默认是被注释的,也就是没有启用日志功能这里我们把注释符号删掉,让它起作用

    • 改完之后我们重启一下php的fpm组件 service php7.2-fpm restart

    • 接下来我们让nginxphpfpm组件进行通讯,这里可以参考php官方文档 https://secure.php.net/manual/zh/install.unix.nginx.php

    • 我们来配置Nginx,我们找到和打开/etc/nginx/nginx.conf可以看到有2行配置

      • include /etc/nginx/conf.d/.conf;

      • include /etc/nginx/sites-enabled/;

    • 可以看到它的意思是分别是说引入 /etc/nginx/conf.d/ 下所有扩展名是conf的文件引入 /etc/nginx/sites-enabled/ 下所有文件 那么我们看一下 /etc/nginx/conf.d/ 文件夹,发现没有东西可以参考。我们再去到/etc/nginx/sites-enabled/发现有一个default文件,这个是nginx默认站点配置,我们看一看,然后在上面改

    • 可以看到一行配置root /var/www/html;

      • 这行配置的意思是站点根目录在 /var/www/html文件夹下我们在下面加多一行

      index index.php index.html;

    • 这句配置是默认去寻找index.php文件,找不到index.php就去找index.html为什么是这个文件呢,因为大部分php项目都是用index.php文件作为一个入口的,只是习惯而已

    • 往下翻,能看到有一段被注释的php相关的配置

      #location ~ \.php$ {# include snippets/fastcgi-php.conf;## # With php-fpm (or other unix sockets):# fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;# # With php-cgi (or other tcp sockets):# fastcgi_pass 127.0.0.1:9000;#}

    • 我们在下面把php官方文档的说明复制在下面,然后跟着改一下 location ~* \.php$ {fastcgi_index index.php;fastcgi_pass 127.0.0.1:9000;include fastcgi_params;fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;fastcgi_param SCRIPT_NAME $fastcgi_script_name;}

    • 这里把因为phpfpm组件现在是以socket文件通讯的,所以这里要修改的应该是

      fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;

    • 这一段还记得刚刚fpm里面的listen配置么,把我们把sock文件路径改成fpm里的sock文件路径,也就是 fastcgi_pass unix:/run/php/php7.2-fpm.sock; 以便?

    • 然后执行 nginx -t 看一下配置有没有语法错误的地方 看到这里就应该知道配置没有语法错误,我们重启一下nginx service nginx restart

    • 接着我们怎么去验证nginx能和php通讯了呢?我们去站点根目录创建一个php文件来测试 我们创建一个简单的php信息的页面,并保存为1.php

    <?php phpinfo();?>

    接下来我们访问 http://127.0.0.1/1.php 看到了一个显示php各种信息的页面,说明我们的nginx已经成功和php进行通讯了

  1. 接着我们去下载wordpress

    • 访问https://cn.wordpress.org/ 下载代码现在完成后,我把wordpress解压到/var/www/html文件夹下,然后我们访问http://127.0.0.1/wordpress/ 发现已经可以看到wordpress的安装界面了

    • 我们开始安装 我们填入数据库相关信息,其它默认 看到这个提示,指的是php现在不能创建文件,因为php-fpm现在是以www-data用户运行的。

      我们刚刚直接解压的行为,导致了文件夹所有权是当前用户,也就是root。要让php-fpm可以创建文件,我们要给wordpress文件夹修改一下权限。 root@kali:/var/www/html# ls -al总用量 32drwxr-xr-x 3 root root 4096 5月 31 16:17 .drwxr-xr-x 3 root root 4096 4月 26 10:27 ..-rw-r–r– 1 root root 18 5月 31 16:12 1.php-rw-r–r– 1 root root 10701 4月 12 06:44 index.html-rw-r–r– 1 root root 612 4月 12 06:43 index.nginx-debian.htmldrwxr-xr-x 5 root root 4096 2月 7 23:53 wordpress 我们给wordpress文件夹修改一下权限 chown -R www-data:www-data wordpress/ 然后浏览器刷新一下,就可以开始安装了 填写之后就安装完毕了

    到此,一个php博客系统wordpress就搭建完成

  1. 了解LNMP架构网站的运行 在上面的部分我们花费了很大的篇幅给大家介绍了如何部署一个Wordpress站点,那接下来我们来说说当你访问一个Wordpress站点的时候,为什么浏览器会给你访问对应的内容呢?

    • 首先我们先来了解下Nginx的角色,Nginx或者你可能知道的IIS、Apache都是一种服务组件,他们的功能是什么呢?

    • 通俗的的解释就是,以服务形式运行,然后作为一个守护进程(守护进程的意思就是一直在执行,不退出),时刻监听着服务器指定端口(一般网站咱们采用的是80端口)的请求,当收到请求后,就根据请求的内容返回对应的内容,返回的内容就是我们前面课程已经了解的HTML、JS、CSS那些,然后由浏览器再去组织渲染展示给用户;所以你可以理解服务组件的功能一句话来解释就是监听并响应请求。

    • 说到返回的内容,这里大家需要了解一个概念,静态网页动态网页;像我们之前课程学到的HTML,HTML的内容都是直接写死的,这种是静态网页

    • Nginx在收到静态网页的请求后会直接读取静态网页的内容返回给浏览器进行渲染,这中间环节没有涉及到第三者,单单Nginx就可以完成了一个静态网页的部署;

    • 那么我们上文中花了那么大篇幅讲到的phpphp-fpmMySQL的部署呢?因为Wordpress使用的是动态网页的技术,是采用PHP这种动态脚本语言编写的,它的数据存储是使用MySQL;

    • 动态网页静态网页有个很直观的感受差距就是:

      • 静态网页,你必须访问不同的路径,如/a和/b,你才能访问到不同的内容;

      • 而动态网页,你就只访问/a路径,后面加上个?id=数字,当数字不同,页面内容也就不同,而这里页面内容实际上就是根据数字的不同,然后去MySQL数据库中读取到的内容不同,id不同的情况下,页面由于id而导致不同的部分的内容是存储在数据库里的。

    • 那么php-fpm是什么呢?

      • Nginx是内容的分发者,刚才讲到,请求静态页面的时候,如index.html,会读取静态网页内容返回,那么如果请求的是index.php呢?

      • 根据配置文件,nginx知道这个不是静态文件,需要去找PHP解析器来处理,那么他会把这个请求简单处理后交给PHP解析器,Nginx会传哪些数据给PHP解析器呢?

      • 如URL、查询字符串(比如?id=1),Header头等,那么CGI就是规定要传哪些数据、以什么样的格式传递给后方处理这个请求的协议;

      • 当Nginx收到index.php这个请求后,会启动对应的CGI程序,这里就是PHP的解析器;

      • 接下来PHP解析器会解析php.ini文件,初始化执行环境,然后处理请求,再以符合CGI规定的格式返回处理后的结果,退出进程;

      • 这中间还有一个叫做fastcgi的东西,是用来提供cgi性能的,而php-fpm你可以理解为一种实现了fastcgi的程序,PHP5.3.3版本里已经集成了php-fpm。

    • 所以整体你可以这样理解:静态网页:用户通过浏览器向服务器提交请求->Nginx接收并响应请求->读取本地网页文件静态内容->返回浏览器

    • PHP动态网页:用户通过浏览器向服务器提交请求->Nginx接收并响应请求->以CGI协议传递请求到php-fpm->php-fpm调用PHP进行动态解析->解析过程根据参数读取MySQL中内容->根据数据库返回内容生成静态网页内容->返回到浏览器

这大概就是一个网页的运行机制

uni-app的基本使用

admin阅读(719)

课程介绍:

基础部分:

  • 环境搭建

  • 页面外观配置

  • 数据绑定

  • uni-app的生命周期

  • 组件的使用

  • uni-app中样式学习

  • 在uni-app中使用字体图标和开启scss

  • 条件注释跨端兼容

  • uni中的事件

  • 导航跳转

  • 组件创建和通讯,及组件的生命周期

  • uni-app中使用uni-ui库

项目:黑马商城项目

uni-app介绍 官方网页

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

即使不跨端,uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验,可快速上手uni-app

为什么要去学习uni-app?

相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。

环境搭建

安装编辑器HbuilderX 下载地址

HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

下载App开发版,可开箱即用

安装微信开发者工具 下载地址

利用HbuilderX初始化项目
  • 点击HbuilderX菜单栏文件>项目>新建

  • 选择uni-app,填写项目名称,项目创建的目录

运行项目

在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意:

  • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功

  • 微信开发者工具在设置中安全设置,服务端口开启

介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。

main.js是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。

unpackage 就是打包目录,在这里有各个平台的打包文件

pages 所有的页面存放目录

static 静态资源目录,例如图片等

components 组件存放目录

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

  • 页面文件遵循 Vue 单文件组件 (SFC) 规范

  • 组件标签靠近小程序规范,详见uni-app 组件规范

  • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范

  • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期

  • 为兼容多端运行,建议使用flex布局进行开发

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面生命周期
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
创建新的message页面

右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

<template>
    <view>
        这是信息页面
    </view>
</template>

<script>
</script>

<style>
</style>
通过pages来配置页面
属性 类型 默认值 描述
path String 配置页面路径
style Object 配置页面窗口表现,配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、
        {
            "path":"pages/message/message"
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ]

通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path":"pages/message/message",
            "style": {
                "navigationBarBackgroundColor": "#007AFF",
                "navigationBarTextStyle": "white",
                "enablePullDownRefresh": true,
                "disableScroll": true,
                "h5": {
                    "pullToRefresh": {
                        "color": "#007AFF"
                    }
                }
            }
        }
    ]
配置tabbar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

Tips

  • 当设置 position 为 top 时,将不会显示 icon

  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性说明:

属性 类型 必填 默认值 描述 平台差异说明
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar 上边框的颜色,仅支持 black/white App 2.3.4+ 支持其他颜色值
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top top 值仅微信小程序支持

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

案例代码:

"tabBar": {
        "list": [
            {
                "text": "首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            {
                "text": "信息",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            {
                "text": "我们",
                "pagePath":"pages/contact/contact",
                "iconPath":"static/tabs/contact.png",
                "selectedIconPath":"static/tabs/contact-active.png"
            }
        ]
    }
condition启动模式配置

启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

属性说明:

属性 类型 是否必填 描述
current Number 当前激活的模式,list节点的索引值
list Array 启动模式列表

list说明:

属性 类型 是否必填 描述
name String 启动模式名称
path String 启动页面路径
query String 启动参数,可在页面的 onLoad 函数里获得

组件的基本使用

uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用

uni-app中的组件,就像 HTML 中的 divpspan 等标签的作用一样,用于搭建页面的基础结构

text文本组件的用法
001 – text 组件的属性
属性 类型 默认值 必填 说明
selectable boolean false 文本是否可选
space string . 显示连续空格,可选参数:enspemspnbsp
decode boolean false 是否解码
  • text 组件相当于行内标签、在同一行显示

  • 除了文本节点以外的其他节点都无法长按选中

002 – 代码案例
<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>来了老弟</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>来了  老弟</text>
  </view>
  <view>
    <text space='emsp'>来了  老弟</text>
  </view>
  <view>
    <text space='nbsp'>来了  老弟</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>
view视图容器组件的用法

View 视图容器, 类似于 HTML 中的 div

001 – 组件的属性

002 – 代码案例
<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

  </view>
</view>
button按钮组件的用法
001 – 组件的属性
属性名 类型 默认值 说明
size String default 按钮的大小
type String default 按钮的样式类型
plain Boolean false 按钮是否镂空,背景色透明
disabled Boolean false 是否按钮
loading Boolean false 名称是否带 loading t图标
  • button 组件默认独占一行,设置 sizemini 时可以在一行显示多个

002 – 案例代码
<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>
image组件的使用
image

图片。

属性名 类型 默认值 说明 平台差异说明
src String 图片资源地址
mode String ‘scaleToFill’ 图片裁剪、缩放的模式

Tips

  • <image> 组件默认宽度 300px、高度 225px;

  • src 仅支持相对路径、绝对路径,支持 base64 码;

  • 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。

uni-app中的样式

  • rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大。

  • 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

  • 支持基本常用的选择器class、id、element等

  • uni-app 中不能使用 * 选择器。

  • page 相当于 body 节点

  • 定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。

  • uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

    • 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;

    • 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;

    • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

       @font-face {
           font-family: test1-icon;
           src: url('~@/static/iconfont.ttf');
       }
  • 如何使用scss或者less

uni-app中的数据绑定

在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}
插值表达式的使用
  • 利用插值表达式渲染基本数据

    <view>{{msg}}</view>
  • 在插值表达式中使用三元运算

    <view>{{ flag ? '我是真的':'我是假的' }}</view>
  • 基本运算

    <view>{{1+1}}</view>
v-bind动态绑定属性

在data中定义了一张图片,我们希望把这张图片渲染到页面上

export default {
  data () {
    return {
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    }
  }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>
v-for的使用

data中定以一个数组,最终将数组渲染到页面上

data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字:{{item.name}}---年龄:{{item.age}}</view>

uni中的事件

事件绑定

在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {
  tapHandle () {
    console.log('真的点我了')
  }
}
事件传参
  • 默认如果没有传递参数,事件函数第一个形参为事件对象

    // template
    <button @click="tapHandle">点我啊</button>
    // script
    methods: {
      tapHandle (e) {
        console.log(e)
      }
    }
  • 如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据

    // template
    <button @click="tapHandle(1)">点我啊</button>
    // script
    methods: {
      tapHandle (num) {
        console.log(num)
      }
    }
  • 如果获取事件对象也想传递参数

    // template
    <button @click="tapHandle(1,$event)">点我啊</button>
    // script
    methods: {
      tapHandle (num,e) {
        console.log(num,e)
      }
    }

uni的生命周期

应用的生命周期

生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数:

函数名 说明
onLaunch uni-app 初始化完成时触发(全局只触发一次)
onShow uni-app 启动,或从后台进入前台显示
onHide uni-app 从前台进入后台
onError uni-app 报错时触发
页面的生命周期

uni-app 支持如下页面生命周期函数:

函数名 说明 平台差异说明 最低版本
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。
onHide 监听页面隐藏
onUnload 监听页面卸载

下拉刷新

开启下拉刷新

在uni-app中有两种方式开启下拉刷新

  • 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

  • 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

<template>
	<view>
		杭州学科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据']
			}
		}
	}
</script>

<style>
</style>

通过pages.json文件中找到当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}
通过API开启

api文档

uni.startPullDownRefresh()
监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大数据']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
  }
}
关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		杭州学科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据']
			}
		},
		methods: {
			startPull () {
				uni.startPullDownRefresh()
			}
		},
		
		onPullDownRefresh () {
			this.arr = []
			setTimeout(()=> {
				this.arr = ['前端','java','ui','大数据']
				uni.stopPullDownRefresh()
			}, 1000);
		}
	}
</script>

上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px

通过onReachBottom监听到触底的行为

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		杭州学科
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
			}
		},
		onReachBottom () {
			console.log('触底了')
		}
	}
</script>

<style>
	view{
		height: 100px;
		line-height: 100px;
	}
</style>

网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送get请求

<template>
	<view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>
<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

发送post请求

数据缓存

uni.setStorage

官方文档

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

代码演示

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorage({
				 	key: 'id',
				 	data: 100,
				 	success () {
				 		console.log('存储成功')
				 	}
				 })
			}
		}
	}
</script>

<style>
</style>
uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

代码演示

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorageSync('id',100)
			}
		}
	}
</script>

<style>
</style>
uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

代码演示

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				id: ''
			}
		},
		methods: {
			getStorage () {
				uni.getStorage({
					key: 'id',
					success:  res=>{
						this.id = res.data
					}
				})
			}
		}
	}
</script>
uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

代码演示

<template>
	<view>
		<button type="primary" @click="getStorage">获取数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			getStorage () {
				const id = uni.getStorageSync('id')
				console.log(id)
			}
		}
	}
</script>
uni.removeStorage

从本地缓存中异步移除指定 key。

代码演示

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorage({
					key: 'id',
					success: function () {
						console.log('删除成功')
					}
				})
			}
		}
	}
</script>
uni.removeStorageSync

从本地缓存中同步移除指定 key。

代码演示

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorageSync('id')
			}
		}
	}
</script>

上传图片、预览图片

上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

案例代码

<template>
	<view>
		<button @click="chooseImg" type="primary">上传图片</button>
		<view>
			<image v-for="item in imgArr" :src="item" :key="index"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				imgArr: []
			}
		},
		methods: {
			chooseImg () {
				uni.chooseImage({
					count: 9,
					success: res=>{
						this.imgArr = res.tempFilePaths
					}
				})
			}
		}
	}
</script>
预览图片

结构

<view>
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>

预览图片的方法

previewImg (current) {
  uni.previewImage({
    urls: this.imgArr,
    current
  })
}

条件注释实现跨段兼容

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

写法:以 #ifdef 加平台标识 开头,以 #endif 结尾。

平台标识

平台 参考文档
APP-PLUS 5+App HTML5+ 规范
H5 H5
MP-WEIXIN 微信小程序 微信小程序
MP-ALIPAY 支付宝小程序 支付宝小程序
MP-BAIDU 百度小程序 百度小程序
MP-TOUTIAO 头条小程序 头条小程序
MP-QQ QQ小程序 (目前仅cli版支持)
MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
组件的条件注释

代码演示

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->
api的条件注释

代码演示

onLoad () {
  //#ifdef MP-WEIXIN
  console.log('微信小程序')
  //#endif
  //#ifdef H5
  console.log('h5页面')
  //#endif
}

样式的条件注释

代码演示

/* #ifdef H5 */
view{
  height: 100px;
  line-height: 100px;
  background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
  height: 100px;
  line-height: 100px;
  background: green;
}
/* #endif */

uni中的导航跳转

利用navigator进行跳转

navigator详细文档:文档地址

跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>
利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面

跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

redirectTo进行跳转

关闭当前页面,跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}
导航跳转传递参数

在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

接收参数的页面

<script>
	export default {
		onLoad (options) {
			console.log(options)
		}
	}
</script>

####

uni-app中组件的创建

在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可

  • 创建login组件,在component中创建login目录,然后新建login.vue文件

    <template>
    	<view>
    		这是一个自定义组件
    	</view>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>
  • 在其他组件中导入该组件并注册

    import login from "@/components/test/test.vue"
  • 注册组件

    components: {test}
  • 使用组件

    <test></test>
组件的生命周期函数
beforeCreate 在实例初始化之后被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

组件的通讯

父组件给子组件传值

通过props来接受外界传递到组件内部的值

<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

<style>
</style>

其他组件在使用login组件的时候传递值

<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>
子组件给父组件传值

通过$emit触发事件进行传递参数

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		props: {
			msg: {
				type: String,
				value: ''
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

父组件定义自定义事件并接收参数

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>
兄弟组件通讯

uni-ui的使用

uni-ui文档

1、进入Grid宫格组件

2、使用HBuilderX导入该组件

3、导入该组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

4、注册组件

components: {uniGrid,uniGridItem}

5、使用组件

<uni-grid :column="3">
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
</uni-grid>

为什么要学C语言

admin阅读(391)

为什么要学C语言

谁叫你不幸生在中国了? ——何祚庥(中国科学院院士)

这是一本给非计算机专业的大学生的C语言的书。“我不是学计算机的,为啥要学C语言?”这个问题每年在中华大地都会被问上几百万次。被问的对象可能是老师,也可能是师哥师姐。师哥师姐往往也就是故作明了的表情,复述一遍隐约记得的老师的话。而这些话多半都是比较高瞻远瞩的,例如“将来可能会用到”,“锻炼编程思维有好处”,“C语言是学编程的基础”等等。这些话没有错,所谓“技不压身”,多学点儿东西肯定比不学要有好处。但问题是,如果把学C语言的精力用来学学其它与专业相关度更高的东西,是不是会更好呢?既然如此,干嘛还学C语言呢?最实在的答案,是何祚庥院士的:“谁叫你不幸生在中国了?[1]

大学里除了要拿到“毕业证”和“学位证”以外,还要过“四级”和“二级”,否则可能会被扣发两证,或找工作受阻,难以“落户”等。这里的二级指的是“全国计算机等级考试二级”,是一个面向“程序员”,“考核计算机基础知识和使用一种高级计算机语言编写程序以及上机调试的基本技能”的考试。虽然社会只需要少量的人会编程序,但莫名其妙的是几乎所有的大学生都想(或被要求)过二级,导致程序设计课程成为了必修课。

二级考试可选的语言包括C、C++、Java、Delphi、Visual Basic、Visual FoxPro和Access。为什么偏偏要学最古老的C呢?这里的原因复杂多样,每个学校都有各自的解读,就不一一列举了。总之,中国一定是世界上“认识”C语言的人口最多的国家,二级考试功不可没。

反正既然此课已开,不学也不行,精力已经搭上,就还是认真了解一下C语言吧。虽然有些无奈,但好在C语言确实是一个有趣的家伙,而且越了解越觉得有趣。如果不信,请往下看……

游戏、黑客和C语言

1969年的美国贝尔实验室,是当时科技界的梦工厂,集结着世界上最富创造力的科学家和工程师,包括数位诺贝尔奖获得者,他们一起创造了无数影响着全人类的发明。比如数码相机的核心——CCD就是那一年在贝尔实验室诞生的。

这帮家伙的成就貌似高不可攀,但其实也都是凡人,在某些方面和我们也是非常相似的。比如当他们见到一台强大的计算机时,心里最先想到的也是用它来玩游戏。那个时代,计算机是大型机构才能拥有的奢侈品,在这上面玩游戏实在暴殄天物。但谁在乎呢,追求快乐是最重要的,所以他们为了痛快地玩游戏而没少动脑筋。

那时候是没有商业游戏的,所以想有游戏玩,首先要发挥DIY精神,自己编。自己编的游戏被别人喜欢,是当时最有面子的事情。有一个叫Ken Thompson(以下尊称为ken)的工程师,26岁,游手好闲,看到阿波罗11号载人登月成功,觉得挺酷,自己也想试试,就设计了一个叫“Space Travel”的游戏。在游戏中,玩家驾驶着宇宙飞船,在虚拟的太阳系里穿梭,欣赏美景的同时,还可以在各个行星、卫星表面降落。这个游戏先是在Mutlics系统上编写,后来又在GECOS系统上重写。能运行这两个系统的机器都是笨重的大型机,虽然运算能力出众,但显示效果很差,而且机时费非常高,玩一次,公司要支付75美元(当时美国人均月收入大约200美元)。这要是被老板发现了,可不是闹着玩的。于是他伙同28岁的同事,Dennis M. Ritchie(以下尊称为dmr),满大楼地寻找免费的“游戏机”。功夫不负有心人,还真被他们找到了一台。

imgimg

PDP-7小型机,DEC制造,拥有当时最先进的图形处理能力。彼时的计算机主要用来处理数据,图形能力并不太重要,所以PDP-7更多的时候是静静地躺着,很少被使用,直到ken和dmr这对骨灰级的玩家发现了它。

游戏开始了。但是,游戏的运行需要操作系统的支持。PDP-7当时还是“裸机”,没有能在其上运行的操作系统。伟大的DIY精神再次发挥作用,他俩挽起袖子开始为PDP-7编写操作系统,并给这个系统起了一个名字——Unix。直到今天,Unix仍然是最被信任的操作系统,它既支撑着军队、政府、电力、电信和银行等大型机构的关键业务,也是苹果Mac系列电脑的动力之源,甚至iPhone、iPod Touch的魅力也部分拜其所赐。

Unix起初是用汇编语言编写的,那是一种更接近机器而不是人的语言。计算机能直接读懂的语言叫机器语言,它所有的语句都是由“0”和“1”两个数字构成的,根本就不是给人看的。当最后一个机器语言程序员疯掉以后,人们终于开始琢磨怎么让计算机认识人语。基本思路是做一个翻译程序,直接把人语翻译成机器语言。这种翻译程序被命名为“编译器”。但是直接理解人语太难了,直到现在还没能实现,所以就折中一下,设计一种尽量接近人语,还能被精确翻译为机器语言的语言。这种语言就是我们常说的编程语言,学编程的过程,其实就是学用编程语言说话给编译器听的过程。第一种编程语言肯定是最接近机器而远离人类的,它就是汇编语言。虽然看上去有几分像人语,比如加法叫“ADD”,减法叫“SUB”,但它的语法完全是机器的,每一行语句都和一条机器指令严格对应,这个特点使得针对一种计算机编写的汇编程序不能在另一种计算机上使用,因为这两种计算机的机器语言是不同的。用专业术语来说,汇编语言缺少“可移植性”。

Unix的优雅加上Space Travel的吸引力,使很多人希望他们的计算机上也能安装Unix,玩玩Space Travel。于是ken和dmr决定改用高级语言编写Unix,这样它就可以在更多类型的机器上运行。

高级语言是除了机器语言和汇编语言以外几乎所有编程语言的统称。它的特点是更接近人语,而与机器语言基本没有瓜葛。不同的高级语言编译器可以把同样的代码翻译成适应不同机器的指令,因而高级语言大多具有很好的可移植性。

故事讲到这里,该这本书的主角——C语言,登场了。决定使用高级语言后,在语言的选择上,ken和dmr遇到了麻烦。当时可供选择的高级语言有很多,包括直到现在还在被使用的BASIC和Fortran等,但都没被看上眼。DIY基因再次发挥作用,他俩决定自己设计一种好用的高级语言,用来重写Unix。那一年是1972年,ken继续完善Unix,dmr以ken早年设计的B语言为基础,开始设计新语言,两人一起开发编译器。这个新语言被随随便便地命名为——C语言。

1983年,因为Unix和C语言的巨大成功,ken和dmr共同获得了计算机界的最高奖——图灵奖。玩游戏玩到这等境界,古今也就只有这两人吧。

Unix和C,得中其一,便能富可敌国。然而,他俩从一开始就没有去想申请专利、商标、软件著作权等法律保护,而是把所有的一切,包括源代码,都随心所欲地到处散播。对他们来说,自己写的程序有人使用,是最大的快乐,也是最大的财富。也正因为如此,很多机构和个人都能自如地为Unix和C做贡献,极大地促进了它们的发展。

从上面的故事,我们可以发现他俩的很多可爱之处:做事情以兴趣为出发点,并不在乎未来会怎样;极富钻研精神,信奉“自己动手,丰衣足食”;乐于分享,不计回报。他们的这些特点正是正宗“黑客精神”的集中体现。他俩也被奉为黑客圈子里的英雄,甚至是开山鼻祖,大家都尊称他俩为ken和dmr(必须小写)。几十年过去了,黑客圈子里再没有第二个人敢叫“ken”,这个英语圈里司空见惯的名字。

Unix和C至今仍是年轻黑客被圈子接受前必须苦练的三大技艺之一和之二(之三是随便一种脚本语言)。由黑客设计,被黑客推崇,所以C语言自身也处处闪耀着黑客精神的光芒。这种光芒使它能够永葆青春。

C语言,不老的传说

最受欢迎的歌一定是被听得最多的,最受欢迎的语言一定是被用得最多的。C语言现在用得多吗?在业界,一般的答案是:

如果一件事可以用X语言做,就一定不要用C语言做。

这里的X可以代指任何语言。天啊,这好象是在说“如果可以听X的歌,就一定不要听周杰伦的歌”。这是在评价周杰伦还是曾轶可啊?

哪个编程语言是最受欢迎的?每个人都会有自己的主观看法。还是用客观的数据说话吧。

imgimg

(图片来源:http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html 上图是TIOBE在2010年8月公布的程序设计语言受欢迎程度的趋势图(最新的统计图请访问上面网址)。可以看到,C语言始终处于前两位,而且最近大有再次夺回第一位的势头。

能不用就不用,还如此受欢迎,这就有些让人费解了。dmr曾经说过一句话:“C诡异离奇,缺陷重重,并获得巨大成功。”因为诡异且有缺陷,所以会被尽量避免使用,取而代之的是弥补了这些缺陷的语言;因为确实获得了巨大成功,所以它至今仍大受欢迎。一个成功的例证是,图x-x中列举的当今最受欢迎的10种语言,除去C语言,剩下的9种中,有7种都直接使用、间接引用或部分借鉴了C语言的语法(比如,它们语句的结尾都要有一个“;”),只有Visual Basic和Python的语法里找不到C的影子。凭这等世界第一的影响力,受到欢迎也就在情理之中了,尽管它是那么的让人爱恨交织。

C语言的爱与恨

C语言设计原则的第一条是:“信任程序员。”对程序设计语言了解不多的人,不会觉得这句话怎样。但对真正的程序员来说,凭这句话就足以对C语言爱一辈子,爱得死去活来。

C语言一夫当道的年代,计算机相当昂贵,但速度比不上现今的手机,内存都是以KB为单位计算。所以,那时候对程序最基本的要求就是效率。C语言完全满足人们对效率的苛求,精心设计的代码可以极大地节约计算机资源,又不像汇编语言那样难用,所以受到程序员的欢迎。后来,硬件越来越便宜,性能越来越高,程序的运行效率已经不是追求的主要目标,安全性、稳定性和是否易于维护等变得重要起来,C语言的弊端便显现了。

C语言给程序员最大的发挥空间,让他们自由地在代码中挥洒激情和创意,从不去质疑这些代码是否会带来危害,因为它“信任程序员”,相信程序员的决定一定是正确的,即便有错误,也一定能自己修正。无限制的自由,在某些人的手中是创造力的源泉,而在另外一些人手中,却能成为混乱的根源。随着软件系统规模的膨胀,需要的程序员越来越多,综合水准越来越低,出现错误的概率越来越大,而每一个低级的错误都可能会引发大灾难。很多人把这种乱象产生的原因归罪于C,开始怀疑它,甚至恨它,却从不反省自己糟糕的编码能力。于是有人说,给这匹野马加上缰绳吧,别让它再恣意狂奔。但是C拒绝了锁链,于是很多语言穿上C的外衣,自己挂上锁链,站了出来。因为它们看上去很像C,所以大家很容易接受;因为它们挂着锁链,所以它们不再信任程序员,而是指手画脚地告诉程序员,这件事情该怎么做,那件事情不能怎么做。如果程序员不听它们的,它们就拒绝工作。这样乱象解除了,开发速度加快了,多人合作容易了,错误减少了,对程序员能力的需求降低了,因而工资也降低了,老板开心了,业界繁荣了。平心而论,“一件事情可以用X语言做,就一定不要用C语言做”确实是一个很好的策略,尽管程序员会失去一些自由,但在合法的范围内仍有一定的空间可以发挥创造力,而且这些创造力很少创造出负面效果,综合起来能让老板、程序员、用户皆大欢喜。但程序员,尤其是受人尊敬的程序员,他们的血液中天生就充满着不安分,向往自由的黑客生活,所以他们会一边抚摸着身上的伤口,一边怀念那个鲁莽却无往不利的老将军,怀念在他手下无拘无束的日子,怀念被他激发出的层层潜能。这个老将军是程序员心中永远的战神。

C语言教给我们的事

现在,还需要使用C语言的地方大概只限于下面三个领域:

  1. C语言仍然是编写操作系统的不二之选。它为操作系统而生,能更直接地与计算机底层打交道,精巧、灵活、高效。最重要的,操作系统的开发者都是最顶尖的程序员,他们有充足的能力和经验驾驭C语言。

  2. 在对程序的运行效率有苛求的地方,比如嵌入式领域,C语言也是首选。不过,嵌入式系统现在的硬件性能也已经足够强大,而功能要求越来越高,所以C语言的生存空间正在缩小。

  3. 在需要继承或维护已有的C代码的地方,还需要C语言。有很多影响深远的软件和程序库最早都是用C开发的,所以还要继续应用C。但是,它们中的很多已经开始使用其它语言重写,那些C的代码早晚有一天会被抛弃。

应用面如此窄,学它能有多大用处呢?如果单纯从“用不上”这个角度得出“学C语言没有用”的结论,是有失公允的。即便对计算机及相关专业而言,C语言的“用处”也不算大。学习C语言的意义在于,它为我们打开一扇了解计算机的窗口。在几乎做任何事情都离不开计算机的今天,越了解计算机也就意味着越能利用好计算机。

美国卡内基梅隆大学计算机科学系前系主任周以真教授在2006年发表了一篇著名的文章——《计算思维》。文中谈到“计算机科学的教授应当为大学新生开一门称为‘怎么像计算机科学家一样思维’的课,面向非专业的,而不仅仅是计算机科学专业的学生”,这是因为“机器学习已经改变了统计学。……计算生物学正在改变着生物学家的思考方式。类似地, 算博弈理论正改变着经济学家的思考方式,纳米计算改变着化学家的思考方式,量子计算改变着物理学家的思考方式”,所以“计算思维代表着一种普遍的认识和一类普适的技能,每一个人,不仅仅是计算机科学家,都应热心于它的学习和运用”。不过遗憾的是,我们现在还很少有学校开设这样的课程。所以程序设计课在某种程度上肩负了传播计算思维的责任。这也是对于不需要使用C语言的学生而言,最大意义之所在。

总之,不管你该不该学C,适不适合学C,既然这门课已经开了,而且有不错的老师带领,那么就好好抓住这个机会吧,别把时间浪费了。也许一个学期之后,你会发现自己在程序设计方面的天赋,进而在这方面努力,最后成为一名受人尊敬的黑客呢。

欢迎来到Birdjiujiu

欢迎刷题