电子商务网站建设实践报告,wordpress 附件预览,给别人做网站的公司,网站建设中的英文最近做项目,觉得还是有意义记录以下前后端框架是怎么搭建的,今天给大家介绍介绍SSM:SpringBootSpringMVCMyBatis后端搭建:SpringBoot快速搭建的网站(Spring Initializr)选择创建之后,会下载到一个zip压缩包,对压缩包进行解压(包地址一般选择后端项目的放的文件夹中)用idea打开项…最近做项目,觉得还是有意义记录以下前后端框架是怎么搭建的,今天给大家介绍介绍SSM:SpringBootSpringMVCMyBatis后端搭建:SpringBoot快速搭建的网站(Spring Initializr)选择创建之后,会下载到一个zip压缩包,对压缩包进行解压(包地址一般选择后端项目的放的文件夹中)用idea打开项目,并配置依赖在项目中会用到SpringBoot、SpringMvc、mysql、lombok、MyBatis、maven在pom.xml中导入依赖?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.6.6/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.example/groupIdartifactIdmeeting/artifactIdversion0.0.1-SNAPSHOT/versionnamemeeting/namedescriptionDemo project for Spring Boot/descriptionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.16/version/dependencydependencygroupIdorg.mybatis.generator/groupIdartifactIdmybatis-generator-core/artifactIdversion1.4.0/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion1.18.12/version/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.16/version/dependencydependencygroupIdcom.auth0/groupIdartifactIdjava-jwt/artifactIdversion3.8.2/version/dependencydependencygroupIdorg.mybatis.generator/groupIdartifactIdmybatis-generator-core/artifactIdversion1.4.0/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-aop/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.1.4/version/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion1.1.10/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project
在Springboot中如果出现出现编译错误记得在Maven中进行清除和重新编译Springboot配置在resources文件中创建application.xml文件夹然后在这个文件中对Spriongoot进行配置#定义后端端口号
server:port: 8080#spring
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/meet?serverTimezoneAsia/Shanghai#数据库地址username: root#数据库账号password: root#数据库密码driver-class-name: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSourceinitialSize: 5 #初始化时建立物理连接的个数 数据库连接池相关的配置minIdle: 1 #最小连接池数量maxActive: 20#最大活跃量 main:allow-circular-references: true #循环依赖开启mvc:pathmatch:matching-strategy: ant_path_matcher#jackson:#date-format: yyyy-MM-dd HH:mm:ss#time-zone: GMT8#和实体类中的注解功能相同 JsonFormat(pattern yyyy-MM-dd HH:mm:ss,timezone GMT8)
#mybatis
mybatis:type-aliases-package: com.example.meeting.model#mapper文件中的全类名mapper-locations: classpath:mappers/*Mappers.xml#扫描映射mappers的地址configuration: #mybatis settings配置map-underscore-to-camel-case: true #开启自动映射cache-enabled: true三层架构Dao层对数据库操作的方法 接口 注解RepositoryService层(对业务进行操作)注解ServiceTransactionalCrotroller层前后端进行数据交互注解RestControllerRequestMapping(地址)model类自己定义的实体类注解ComponentDataSetterGetter启动类(启动项目)MapperScan“扫描dao层的地址”SpringBootApplication后端编码格式在resources文件中创建一个mapper目录在里面写../Mappers.xml文件用于启动类启动时进行扫描对数据库进行操作前端搭建搭建一个前端项目安装组件npm i vue-router3.5.3 //路由管理器组件npm i element -ui S//桌面端组件库npm install axios//HTTP网络端的请求库配置index.jsimport Vue from vue;
import router from vue-router;/* 导入路由 */
import Login from ../Login.vue;/* 导入其他组件 */
import Main from ../Main.vue;/* 导入其他组件 */Vue.use(router);
var rout new router({
routes: [
{
path: /login,//路由地址
name: Login,
component: Login//组件名
},
{
path: /main,
name: Main,
component: Main,
children:[//子组件
},
]
}
);//添加路由导航守卫,每次发生路由时触发,to.path你要去的页面
rout.beforeEach((to,from,next){
if(to.path/login||to.path/userlogin||to.path/userrigin){//如果用户访问的登录页直接放行
return next();
}else{
//给浏览器缓存account
var account sessionStorage.getItem(account);
if(accountnull){
return next(/userlogin);
}else{return next();//已经登录
}
}
})
//导出路由对象
export default rout;配置main.js//main.js是项目核心配置文件
//导入vue.js
import Vue from vue
//导入一个默认的组件
import App from ./App.vueVue.config.productionTip false//导入路由组件 ./表示当前目录
import router from ./router/index.js;
Vue.use(router);//导入ElementUI框架, 会导入ElementUI中所有的组件
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);//导入 axios
import axios from axios;
//设置访问后台服务器地址
axios.defaults.baseURLhttp://localhost:8080/;//前端响应后端设置的URL
//将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
Vue.prototype.$httpaxios;
//axios 请求拦截
axios.interceptors.request.use(config {
//为请求头对象添加 Token 验证的 token 字段
config.headers.adminToken sessionStorage.getItem(adminToken);//接收adminToken
config.headers.userToken sessionStorage.getItem(userToken);//接收userToken
return config;
})
// 添加响应拦截器
axios.interceptors.response.use((resp) {//正常响应拦截
if(resp.data.code500){
ElementUI.Message({message:resp.data.message,type:error})
}
if(resp.data.code202){
sessionStorage.clear();
router.replace(/userlogin);
}
return resp;
});//创建项目中唯一的一个vue对象
new Vue({render: h h(App), //默认将app.vue组件加载到唯一的index.html中的div idappdiv上面,router,
}).$mount(#app)配置App.vuetemplatediv idapp!-- router-view就是用来显示不同组件的,就向一个画布--router-view/router-view/div
/templatescript/* 导出组件,并为组件定义数据,函数,生命周期函数 */export default{data(){return{}}}
/scriptstyle/style在前端向后端申请请求的时候会出现跨域的问题以至于前端和后端不能正常连接在这里的话我们就有必要在后端进行设置一个过滤器代码如下package com.example.meeting.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;import java.util.Collections;Configuration
public class CorsConfig {Beanpublic CorsFilter corsFilter() {CorsConfiguration corsConfiguration new CorsConfiguration();//1,允许任何来源corsConfiguration.setAllowedOriginPatterns(Collections.singletonList(*));//2,允许任何请求头corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);//3,允许任何方法corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);//4,允许凭证corsConfiguration.setAllowCredentials(true);UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration(/**, corsConfiguration);return new CorsFilter(source);}
}下面提供以下最近做的一个签到项目供大家参考代码稍微有点多本次项目的后端代码前端代码
