2.2 MVVM模式

视图（View）代表用户交互界面，一个 Web 应用就可能有很多的界面，在 MVVM 模式中，视图仅仅处理的只有数据采集、处理，还有用户的请求， 并不包括业务流程的处理，业务流程由模型（Model）来处理。

模型（Model）就是业务流程/状态的处理及业务规则的制定。模型处理业务流程的过程其它层是无法看见了的，它就像黑箱子，在接受视图请求的数据之后，然后返回最终的处理结果。MVVM 最主要的核心就是业务模型的设计，一个典型的应用例子就是目前流行的 EJB 模型，它从应用技术实现的角度对模型做了进一步的划分，以便充分利用现有的组件，但是它不能作为应用设计模型的框架。

控制器（Controller）可以理解为接收用户的请求，然后视图和模型匹配在一起，一起再完成用户请求。它有非常明显的作用在划分控制层上，可以很清晰地告诉你，它就是一个分发器，选择什么样的模型、视图，可以完成用户的什么样的请求。控制层不做所有的数据处理，比如说：用户点击一个连接，控制层接受到请求之后，并不处理业务信息，它只是向模型传递用户的信息，同时告诉模型做什么，然后选择符合需求的视图返回给用户。

2.3 B/S结构

2.4 Spring boot框架

2.5 MySQL数据库

Mysql数据库在编程过程中的作用是很广泛的，为用户进行数据查询带来了方便。Mysql数据库的应用因其灵活性强，功能强大，所以在实现某功能时只需要一小段代码，而不像其他程序需要编写大段代码。总体来说，Mysql数据库的语言相对要简洁很多。

数据流程分析主要就是数据存储的储藏室，它是在计算机上进行的，而不是现实中的储藏室。数据的存放是按固定格式，而不是无序的，其定义就是：长期有固定格式，可以共享的存储在计算机存储器上。数据库管理主要是数据存储、修改和增加以及数据表的建立。为了保证系统数据的正常运行，一些有能力的处理者可以进行管理而不需要专业的人来处理。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。介于数据库的功能强大等特点，本系统的开发主要应用了Mysql进行对数据的管理。

2.7 B/S体系工作原理

B/S架构采取浏览器请求，服务器响应的工作模式。

用户可以通过浏览器去访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；

而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中；

从Web服务器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。在这种结构中，将许许多多的网连接到一块，形成一个巨大的网，即全球网。而各个企业可以在此结构的基础上建立自己的Internet。

在 B/S 模式中，用户是通过浏览器针对许多分布于网络上的服务器进行请求访问的，浏览器的请求通过服务器进行处理，并将处理结果以及相应的信息返回给浏览器，其他的数据加工、请求全部都是由Web Server完成的。通过该框架结构以及植入于操作系统内部的浏览器，该结构已经成为了当今软件应用的主流结构模式。

2.8 Vue.js 主要功能

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

第三章 系统分析

个人网页的网站地开发采用了Java的Springboot框架，开发了功能完备、使用简单的前端应用程序，并建立、维护了一个数据完整、安全、稳定性强的后台数据库系统。

系统使用Springboot框架和Mysql数据库作为设计工具，可简单易行地学习操作。用户角色之间的相结合开发一个个人网页的网站是值得尝试的，数据完整性和许多品质为数据的功能分配和管理提供了依据。它也是数据库安全平台的重要组成部分，是提高和增强数据安全性的重要手段。此外，为了提供更平滑，更智能和更有效的基本控制方法，定义了同时构建对安全计算环境的支持所需的步骤，并帮助维护安全性。因为在这两种开发工具中，功能强大且免费且界面良好，所以个人网页的网站在技术方面是可行的。

个人网页的网站的开发是由开发者自己开发，不需要购买其他软件或者端口之类的，而且在个人网页的网站开发之前所做的市场调研以及市场考察，都是没有任何费用的，通过开发者自己的努力，所有的工作的都是自己亲力亲为，在碰到自己比较难以解决的问题，大多是通过同学和指导老师的帮助进行相关信息的解决，所以对于个人网页网站的开发在经济上是完全可行的，没有任何费用支出的。

可操作性主要是对个人网页的网站设计完成后，用户的使用体验度，对于管理员可以通过系统随时管理相关的数据信息，并且对于管理员、用户二个用户角色，都可以简单明了的进入到自己的系统界面，通过界面导航菜单可以简单明了地操作功能模块，方便用户信息需求，对于系统的操作，不需要专业人员都可以直接进行功能模块的操作管理，所以在系统的可操作性是完全可以的。本系统的操作使用的也是界面窗口进行登录，所以操作人员只要会简单的电脑操作就完全可以的。

图3-1登录操作流程图

对于个人网页的网站，需要随时添加所需要的数据信息，对于用户添加信息，需要根据添加界面，根据选框的内容进行填写所要添加的数据信息，信息输入完成后判断数据信息是否符合要求，符合要求则添加完成，用户所添加的信息不符合要求，则需要返回到第一步，重新输入数据信息，再进行判断操作，如图3-2所示。

图3-2 信息添加流程图

不管是哪个用户角色进入到不同的系统操作界面，都可以进行不同的信息内容的操作功能，对用系统数据信息的删除，用户一旦将信息删除，那么该删除的数据信息将无法恢复，所以用户在对数据删除事，一定判断删除的内容是否是确定要删除的，确定无误后选择确定删除操作，如图3-3所示。

图3-3 信息删除流程图

个人网页网站的开发对管理模块和系统使用的数据库进行分析，编写代开发，规划和操作是构建信息管理应用程序的必要三步曲，它决定了系统是否能够真正实现预设功能以及是否可以在成功设计后实施。在开发过程中，每个阶段必须严格按照线性顺序进行开发，并且在相应阶段生成的每个工作都可以通过技术进行验证和检查。确保一个阶段完成后是正确的，不会造成下一阶段拖拽现象，使系统完成设计功能后得到保证。

从个人网页网站的成功开发经验来看，上述方法效果最为明显，最大程度地降低了系统开发的复杂性。如图4-2所示。

图4-2开发系统流程图

数据库是整个软件编程中最重要的一个步骤，对于数据库问题主要是判定数据库的数量和结构公式的创建。展示系统使用的是Mysql进行对数据库进行管理，进行保证数据的安全性、稳定性等。

概念模型的设计是为了抽象真实世界的信息，并对信息世界进行建模。它是数据库设计的强大工具。数据库概念模型设计可以通过E-R图描述现实世界的概念模型。系统的E-R图显示了系统中实体之间的链接。而且Mysql数据库是自我保护能力比较强的数据库，下图主要是对数据库实体的E-R图：

(1)  个人网页网站整体E-R图，如图4-3所示：

图4-3整体E-R图

 (2) 个人展示实体图如图4-4所示：

图4-4个人展示实体图

这些功能可以充分满足个人网页网站的需求。此系统功能主要展示用户与管理员的功能结构，如图4-5所示。

4.3.2数据库逻辑设计

针对系统的实体和属性，结合数据设计思想，对系统的逻辑设计的内容进行如下描述。

网站资讯（网站资讯编号、标题、分类、资讯内容）。

个人展示（个人展示编号、用户名、性别、照片、年龄、爱好、特长、联系方式）。

资讯分类（资讯分类编号、内容）。

我们可以根据数据结构的详细分析要求，我们根据输入和输出数据量的要求进行分析，确定什么表，结构之间的关系，我们可以验证，调整和完善，查询和浏览过程，可以实现数据库，以使用户对数据和功能有更多要求。

个人网页网站的登录界面，通过填写账号、密码、等信息进行登录，如图5-1所示。

图5-1登录界面图

用户登录的逻辑代码如下所示。

/**

     * 登录

     * @param data

     * @param httpServletRequest

     * @return

     */

    @PostMapping("login")

    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

        log.info("[执行登录接口]");

        String username = data.get("username");

        String email = data.get("email");

        String phone = data.get("phone");

        String password = data.get("password");

        List resultList = null;

        Map<String, String> map = new HashMap<>();

        if(username != null && "".equals(username) == false){

            map.put("username", username);

            resultList = service.select(map, new HashMap<>()).getResultList();

        }

        else if(email != null && "".equals(email) == false){

            map.put("email", email);

            resultList = service.select(map, new HashMap<>()).getResultList();

        }

        else if(phone != null && "".equals(phone) == false){

            map.put("phone", phone);

            resultList = service.select(map, new HashMap<>()).getResultList();

        }else{

            return error(30000, "账号或密码不能为空");

        }

        if (resultList == null || password == null) {

            return error(30000, "账号或密码不能为空");

        }

        //判断是否有这个用户

        if (resultList.size()<=0){

            return error(30000,"用户不存在");

        }

        User byUsername = (User) resultList.get(0);

        Map<String, String> groupMap = new HashMap<>();

        groupMap.put("name",byUsername.getUserGroup());

        List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();

        if (groupList.size()<1){

            return error(30000,"用户组不存在");

        }

        UserGroup userGroup = (UserGroup) groupList.get(0);

        //查询用户审核状态

        if (!StringUtils.isEmpty(userGroup.getSourceTable())){

            String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();

            String res = String.valueOf(service.runCountSql(sql).getSingleResult());

            if (res==null){

                return error(30000,"用户不存在");

            }

            if (!res.equals("已通过")){

                return error(30000,"该用户审核未通过");

            }

        }

        //查询用户状态

        if (byUsername.getState()!=1){

            return error(30000,"用户非可用状态，不能登录");

        }

        String md5password = service.encryption(password);

        if (byUsername.getPassword().equals(md5password)) {

            // 存储Token到数据库

            AccessToken accessToken = new AccessToken();

            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

            accessToken.setUser_id(byUsername.getUserId());

            tokenService.save(accessToken);

            // 返回用户信息

            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

            user.put("token", accessToken.getToken());

            JSONObject ret = new JSONObject();

            ret.put("obj",user);

            return success(ret);

        } else {

            return error(30000, "账号或密码不正确");

        }

}

首页，可以进行首页、公告栏、网站资讯、个人展示等功能模块的查看与操作，如图5-2所示。

图5-2系统首页界面图

个人资料页面可以查看个人信息资料等信息，并可对个人资料进行修改以及补充。如图5-3所示。

图5-3个人资料界面图

网站资讯展示页面可以查看最新网站资讯内容，并可通过关键词搜索。如图5-4所示。

图5-4网站资讯展示界面图

网站资讯关键代码如下。

 @PostMapping("/add")

    @Transactional

    public Map<String, Object> add(HttpServletRequest request) throws IOException {

        service.insert(service.readBody(request.getReader()));

        return success(1);

    }

    @Transactional

    public Map<String, Object> addMap(Map<String,Object> map){

        service.insert(map);

        return success(1);

}

    public Map<String,Object> readBody(BufferedReader reader){

        BufferedReader br = null;

        StringBuilder sb = new StringBuilder("");

        try{

            br = reader;

            String str;

            while ((str = br.readLine()) != null){

                sb.append(str);

            }

            br.close();

            String json = sb.toString();

            return JSONObject.parseObject(json, Map.class);

        }catch (IOException e){

            e.printStackTrace();

        }finally{

            if (null != br){

                try{

                    br.close();

                }catch (IOException e){

                    e.printStackTrace();

                }

            }

        }

        return null;

}

    public void insert(Map<String,Object> body){

        StringBuffer sql = new StringBuffer("INSERT INTO ");

        sql.append("`").append(table).append("`").append(" (");

        for (Map.Entry<String,Object> entry:body.entrySet()){

            sql.append("`"+humpToLine(entry.getKey())+"`").append(",");

        }

        sql.deleteCharAt(sql.length()-1);

        sql.append(") VALUES (");

        for (Map.Entry<String,Object> entry:body.entrySet()){

            Object value = entry.getValue();

            if (value instanceof String){

                sql.append("'").append(entry.getValue()).append("'").append(",");

            }else {

                sql.append(entry.getValue()).append(",");

            }

        }

        sql.deleteCharAt(sql.length() - 1);

        sql.append(")");

        log.info("[{}] - 插入操作：{}",table,sql);

        Query query = runCountSql(sql.toString());

        query.executeUpdate();

    }

个人展示列表页面可以了解（姓名、性别、年龄、爱好、特长）等信息，可以进行搜索操作，如图5-5所示。

图5-5个人展示列表界面图

个人展示列表关键代码如下所示。

在管理员功能页面可以查看轮播图、公告栏、用户管理（管理员、用户注册）更多管理（网站资讯、资讯分类、个人展示）等内容进行相对应操作，如图5-6所示。

图5-6管理员功能界面图

用户管理，如图5-7所示。

图5-7用户管理界面图

公告栏管理，在公告栏页面可以查看标题、正文内容，并可根据需要进行修改或删除操作，如图5-8所示。

图5-8公告栏管理界面图

公告栏管理关键代码如下所示。

   @RequestMapping(value = {"/count_group", "/count"})

    public Map<String, Object> count(HttpServletRequest request) {

        Query count = service.count(service.readQuery(request), service.readConfig(request));

        return success(count.getResultList());

}

资讯分类管理，在资讯分类页面可以对资讯分类信息（资讯类型、创建时间、更新时间）进行管理。并可根据需要进行修改或删除操作，如图5-9所示。

图5-9资讯分类管理界面图

个人展示管理，在个人展示管理页面可以对具体信息（姓名、性别、爱好、特长、联系方式）进行管理。并可根据需要进行修改或删除操作，如图5-10所示。

图5-10个人展示管理界面图

个人展示管理关键代码如下：

   @RequestMapping(value = {"/avg_group", "/avg"})

public Map<String, Object> avg(HttpServletRequest request) {

        Query count = service.avg(service.readQuery(request), service.readConfig(request));

        return success(count.getResultList());

}

第六章  系统的测试

系统设计不能保证没有错误，这是一个开发过程，在错误或错误的过程中难以避免，这是不可避免的，但我们不能使这些错误始终存在于系统中，错误可能会造成无法估量的后果 如系统崩溃，安全信息，系统无法正常启动，导致安装用户手机屏幕等，为了避免这些问题，我们需要测试程序，并发现这些问题，并纠正它们 ，并使系统更长时间稳定成熟，本章的作用是发现这些问题，并对其进行修改，虽然耗时费力，但长期非常重要和必要 系统的开发。

软件测试与开发过程是一样的，都必须按照软件工程的正规原理进行，遵守管理学理论。不过，目前国内的软件测试已经积累了大量经验和方法，步骤相对成熟，软件测试的效率也越来越高。

个人网页网站的实现，对于系统中功能模块的实现及操作都必须通过测试进行来评判系统是否可以准确的实现。在个人网页网站正式上线使用之前必须做的一步就是系统测试，对于测试发现的错误及时修改处理，保证系统准确无误的供给用户使用。

1、功能测试

从用户的角度来看，测试时不了解新开发软件的内部结构，因此可以将系统与黑匣子进行比较，盲目输入后可以查看系统给出的反馈。这种测试属于黑盒测试，在测试中如果输入错误信息系统会报错。

2、性能测试

测试软件程序的整体状况（称为性能测试）通常使用自动化测试工具来检测系统的整体功能，在负载测试和压力测试之间进行分配，在某些情况下，将这两种情况结合起来。虽然压力测试可以检测到系统可以提供的最高级别的服务，但负载测试可以测试系统如何响应增加的负载。

测试评估系统质量的方法不局限于系统编码和过程，应该与软件设计工作和历史需求分析密切相关。

软件测试应遵循以下原则：

(1)软件测试应尽快进行，整个测试部分应在软件开发和设计的整个过程中进行。如发现错误，立即处理，将大大减少软件开发的时间，并提高软件的质量。

(2)在软件的各种测试中，测试过程中使用的计划、报告等应妥善处理和存储。其主要目的是为了便于以后系统的维护。

(3)软件测试整个过程中的聚类现象应优先考虑。

(4)对于软件测试，我们应该尽量不去和自己设计的系统进行参考，而是要测试对方的程序，以确保软件测试结果的客观性和公平性。

(5)整个测试计划严格按照软件测试的具体实施细则进行。

(6)对整个测试结果进行综合检查，尽量避免重复错误。

个人网页网站满足用户的要求和需求，能够有效的提高用户的使用率。