vue+springmvc前后端分离开发九前端环境的搭建与前端项目创建

前端需要什么环境?

  • 相比后端,前端的环境要好配置一些,因为系统是基于web的,所以有的时候只需要一个浏览器就行了
  • 此项目需要的前端环境如下
    • 火狐、谷歌、edge等主流浏览器,不要用ie就行
    • nodejs,用来安装vue的

浏览器安装

  • 我使用的是win10自带的edge浏览器,想用别的浏览器请自行下载

Vue安装

  • 这里说的vue安装,其实是安装vue-cli,它集成了一系列解决方案,能够帮助我们快速搭建好单页应用、方便安装管理依赖等
  • 网上对vue-cli安装的教程有很多,建议自行搜索,但一定记住它的版本必须在3以上,否则不能使用vue ui
  • 简单概括vue-cli的安装步骤
    • 安装nodejs(安装stable版,而不是latest)
    • 更换npm的下载源,或者下载cnpm
    • 用npm install @vue/cli -g命令安装vue-cli

创建一个vue项目

  • 前端环境设置好了以后,就可以开始创建一个vue项目了

  • 打开命令行,输入vue ui,开启图形管理界面

    进入命令行输入vue ui

  • 在创建选项中,将目录定位到我们之前clone下来的git仓库上,选择创建项目在与后端项目同级的位置上

    定位目录

  • 点击创建,在下一个创建新项目选项中的配置如下,这里不选择初始化git仓库,因为很明显我们已经有了git仓库了

    创建新项目配置

  • 预设选择标准预设即可,等待项目创建完毕

    选择预设

  • 项目创建完毕,用vscode打开它(你可能需要安装vue插件以提供语法支持功能),目录如下

    vue项目目录

前端项目目录结构简单介绍

  • node_modules
    • 项目依赖都在这里,是一个单独的环境
  • public
    • favicon.ico是网站的小图标
    • index.html是入口文件
  • src
    • assets
      • 用来存访一些静态图片,注意要以有组织的形式存访
    • components
      • 在这里编写一些可复用的组件,也可单独作为一个页面
    • router
      • index.js这个文件是用来对前端路由进行管理的,归功于vue-router,前端真正意义上实现了路由由自己来决定
    • store
      • index.js这个文件是用来对全局状态进行管理的,实质上是vuex的作用
    • views
      • 编写一些视图文件,真正意义上展现出来的页面,会结合vue-router一起使用,注意命名规范
    • App.vue
      • 相当于一个模板,模板内部可以不断地替换各种各样的视图,但是模板的整体组成不会改变
    • main.js
      • 程序入口,全局依赖,全局配置都写在这里
  • .gitignore
    • 熟悉git的人都知道这时git提交时会根据正则表达式忽略掉部分文件
  • package.json
    • 记录着项目的一些信息,比如项目名、版本、脚本代码、开发依赖、运行依赖等,非常重要

至此,前端环境的搭建和前端项目创建已讲解完毕,下一节会讲解此项目开发所需要的各种依赖,以及用vuetify写一个模板页

原文地址:https://blog.csdn.net/qq_44938644/article/details/116082056

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


开发过程中是不可避免地会出现各种异常情况的,例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题,甚至直接导致程序崩溃。因此,在开发过程中,合理处理异常、避免异常产生、以及对异常进行有效的调试是非常重要的。 对于异常的处理,一般分为两种方式: 编程式异常处理:是指在代
说明:使用注解方式实现AOP切面。 什么是AOP? 面向切面编程,利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。 通俗描述:不通过修改源代码方式,在主干功能里面添加新功能。 AOP底层使用动态代理。 AOP术语 连接点
Spring MVC中的拦截器是一种可以在请求处理过程中对请求进行拦截和处理的机制。 拦截器可以用于执行一些公共的操作,例如日志记录、权限验证、数据转换等。在Spring MVC中,可以通过实现HandlerInterceptor接口来创建自定义的拦截器,并通过配置来指定拦截器的应用范围和顺序。 S
在 JavaWeb 中,共享域指的是在 Servlet 中存储数据,以便在同一 Web 应用程序的多个组件中进行共享和访问。常见的共享域有四种:ServletContext、HttpSession、HttpServletRequest、PageContext。 ServletContext 共享域:
文件上传 说明: 使用maven构建web工程。 使用Thymeleaf技术进行服务器页面渲染。 使用ResponseEntity实现下载文件的功能。 @Controller public class FileDownloadAndUpload { @GetMapping("/file/d
创建初始化类,替换web.xml 在Servlet3.0环境中,Web容器(Tomcat)会在类路径中查找实现javax.servlet.ServletContainerInitializer接口的类,如果找到的话就用它来配置Servlet容器。 Spring提供了这个接口的实现,名为SpringS
在 Web 应用的三层架构中,确保在表述层(Presentation Layer)对数据进行检查和校验是非常重要的。正确的数据校验可以确保业务逻辑层(Business Logic Layer)基于有效和合法的数据进行处理,同时将错误的数据隔离在业务逻辑层之外。这有助于提高系统的健壮性、安全性和可维护
什么是事务? 事务(Transaction)是数据库操作最基本单元,逻辑上一组操作,要么都成功,要么都失败,如果操作之间有一个失败所有操作都失败 。 事务四个特性(ACID) 原子性 一组操作要么都成功,要么都失败。 一致性 一组数据从事务1合法状态转为事务2的另一种合法状态,就是一致。 隔离性 事
什么是JdbcTemplate? Spring 框架对 JDBC 进行封装,使用 JdbcTemplate 方便实现对数据库操作。 准备工作 引入jdbcTemplate的相关依赖: 案例实操 创建jdbc.properties文件,配置数据库信息 jdbc.driver=com.mysql.cj.
SpringMVC1.MVC架构MVC是模型(Model)、视图(View)、控制器(Controller)的简写,是一种软件设计规范是将业务逻辑、数据、显示分离的方法来写代码MVC主要作用是:降低了视图和业务逻辑之间的双向耦合MVC是一个架构模型,不是一种设计模式。1.model(模型)数据模型,提供要展示的数据,因此包
SpringMVC学习笔记1.SpringMVC应用1.1SpringMVC简介​SpringMVC全名叫SpringWebMVC,是⼀种基于Java的实现MVC设计模型的请求驱动类型的轻量级Web框架,属于SpringFrameWork的后续产品。​MVC全名是ModelViewController,是模型(model)-视图(view)-控制器(co
11.1数据回显基本用法数据回显就是当用户数据提交失败时,自动填充好已经输入的数据。一般来说,如果使用Ajax来做数据提交,基本上是没有数据回显这个需求的,但是如果是通过表单做数据提交,那么数据回显就非常有必要了。11.1.1简单数据类型简单数据类型,实际上框架在这里没有
一、SpringMVC简介1、SpringMVC中重要组件DispatcherServlet:前端控制器,接收所有请求(如果配置/不包含jsp)HandlerMapping:解析请求格式的.判断希望要执行哪个具体的方法.HandlerAdapter:负责调用具体的方法.ViewResovler:视图解析器.解析结果,准备跳转到具体的物
1.它们主要负责的模块Spring主要应用于业务逻辑层。SpringMVC主要应用于表现层。MyBatis主要应用于持久层。2.它们的核心Spring有三大核心,分别是IOC(控制反转),DI(依赖注入)和AOP(面向切面编程)。SpringMVC的核心是DispatcherServlet(前端控制器)。MyBatis的核心是ORM(对
3.注解开发Springmvc1.使用注解开发要注意开启注解支持,2.注解简化了,处理映射器和处理适配器,只用去管视图解析器即可案例代码:1.web.xml,基本不变可以直接拿去用<!--调用DispatcherServlet--><servlet><servlet-name>springmvc</servlet-name>
拦截器概述SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。**过滤器与拦截器的区别:**拦截器是AOP思想的具体应用。过滤器servlet规范中的一部分,任何javaweb工程都可以使用
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:xsi="
学习内容:1、SSH&SSM2、Spring3、Struts2&SpringMVC4、Hibernate&MyBatis学习产出:1.SSH和SSM都是有Spring框架的,他们两个差不多。2.Spring分为四个模块,持久层,表示层,检测层,还有核心层,核心层分为2个关键核心功能。分别为,控制反转(IOC),依赖注入(DI),和面向切面编程
一、SpringMVC项目无法引入js,css的问题具体原因是css和js等被SpringMVC拦截了:解决方案:在spring-mvc.xml中配置<mvc:default-servlet-handler/><?xmlversion="1.0"encoding="UTF-8"?><beansxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
开发环境:Eclipse/MyEclipse、Tomcat8、Jdk1.8数据库:MySQL前端:JavaScript、jQuery、bootstrap4、particles.js后端:maven、SpringMVC、MyBatis、ajax、mysql读写分离、mybatis分页适用于:课程设计,毕业设计,学习等等系统介绍