简单Web开发流程全解——上

最新推荐文章于 2024-05-31 16:55:56 发布

Maybemust

最新推荐文章于 2024-05-31 16:55:56 发布

阅读量4.2k

点赞数 9

分类专栏： web技术应用

本文链接：https://blog.csdn.net/Maybemust/article/details/82721060

版权

web技术应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近因为专业课程的缘故，在两周时间内，从html, css, js到servlet, jsp学了一遍，趁着有空发篇文章记一下，毕竟两周内花费了很多时间学到，不能轻易丢下。

文章目录

服务器

因为只是专业课程，所以没有专门租借服务器，而是采用了本机作为服务器的方式。这里采用了apache的Tomcat ，下载好相应版本之后，需要在环境变量中配置Java的路径，然后找到Tomcat的bin目录下，

如果是Linux双击.sh文件，Windows双击.bat文件
运行截图
出现上方界面就说明正常运行了
如果闪退，大概是路径问题，也就是Java环境有问题。建议采用JAVA_HOME和JRE_HOME的写法，因为有文章说会检测这两个变量是否定义，我暂时还没有验证。
此时在浏览器中可以输入
localhost:8080
如果出现下方界面，就说明配置完毕
这里写图片描述
其中8080是默认打开端口号，可以在配置文件中修改。
而显示内容都存放在webapps的ROOT文件目录下，默认打开的网页也可以在配置文件中修改。
配置文件修改，路径见地址栏

数据库

本次采用了小型简单的数据库Navicat for MySQL，因为操作简单所以被老师推荐。在使用之前，要有MySQL数据库。这两项处理好之后，在运行Navicat for MySQL之前，先打开MySQL中的mysqld.exe,否则可能会出现Navicat for MySQL连接不上的情况。待mysqld.exe弹出并关闭以后，以管理员身份打开navicat.exe。第一次链接默认没有密码可以直接连接，但是因为没有密码的数据库无法在jdbc中链接，所以可以在用户界面中进行管理，设置密码。

然后就是新建数据库之类的操作，这里就不一一概述，只是提醒一点，创建新的数据库的时候一定要至少设定UTF-8编码方式，否则汉字存储会出现问题。而且在创建好之后也无法重新设置。

MVC架构

这个构架很简单，网上有很多详细的解释。这个模型比较好的就是可以把前端用到的html, jsp等不需要关注后端实现的地方放到一起，数据库和实体也不需要实时修改，无论是哪一模块发生变化，只要接口不变，就无需更改，只要调用即可。

这是一个简单的说明，可以看到jsp和后端实现是分离的。
更深入的我就不班门弄斧了。

前端页面

前端比较好写，都是脚本语言，只不过各门语言不同，会有一些语法的不同，即使我已经做完开发，对于各类语言也不是特别熟悉。所以说最好还是看专门的语法。这里就简单说一下遇到的注意事项：

注意字符格式，还是老样子UTF-8编码
jsp头部引用的库，不管用不用的到先大概记录一下，就当保存格式了

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

界面跳转方式很多
-可以用js脚本写个函数跳转
-可以在a标签里写链接
-也可以onclick触发事件
-在本工程目录下可以在web.xml中定义跳转路径

<servlet>
    <servlet-name>FirstPageServlet</servlet-name>
    <servlet-class>servlet.FirstPageServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>FirstPageServlet</servlet-name>
    <url-pattern>/firstPage</url-pattern>
  </servlet-mapping>
  <servlet>

界面可以考虑将版式和标签分开，否则就显得乱
手机端的浏览器适应可以简单采用格栅系统，bootstrap里有
活用meta标签，这是个神奇的标签。利用这个标签，可以实现很多功能。例如实现设备宽度查询效，禁止使用缩放功能。

<meta name="viewport"  content="width=device-width,
minimum-scale=1.0, maximum-scale=2.0; charset=UTF-8">
//展示界面是一倍大小，最大两倍，编码格式utf8

如果要实现适应不同大小的界面，例如meta标签查询宽度之后，可以构造每个宽度下的样式，可以利用hidden实现不用宽度下展示不同的类容。如果要使界面美观，最好写几套不同的界面。
如果不需要实现自适应，可以在PC端的时候，设计好布局，例如div、span模块或者box这些容器进行布局。命名一定要规范，方便日后修改。
js代码最好写在head或者body中间，不要放到最后或者外面。
对于一些特殊属性，例如readonly这些，操作的时候最好用函数进行处理。
对于输入输出流不熟悉的话，不要轻易使用document来输出。

后端实现

后端又是一大块东西，有时间再接着更新。

开发流程

最后，特别感谢李老师、王老师和陆老师提供的帮助。

Maybemust

关注

9
点赞
踩
50

收藏

觉得还不错? 一键收藏
0
评论
简单Web开发流程全解——上

最近因为专业课程的缘故，在两周时间内，从html, css, js到servlet, jsp学了一遍，趁着有空发篇文章记一下，毕竟两周内花费了很多时间学到，不能轻易丢下。服务器数据库MVC架构前端页面后台实现开发流程服务器因为只是专业课程，所以没有专门租借服务器，而是采用了本机作为服务器的方式。这里采用了apache的Tomcat ，下载好相应版本之后，需要在环境变量中配置...
复制链接

扫一扫

专栏目录