Skip to content

T
textW
提交 6ba358dc authored 作者: 吴旭健1's avatar 吴旭健1
浏览文件
操作

实习生测试框架

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 1032 行增加 和 0 行删除
.browserslistrc 0 → 100644
浏览文件 @ 6ba358dc
> 1%
last 2 versions
.eslintrc.js 0 → 100644
浏览文件 @ 6ba358dc
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-catch-shadow': 2,//禁止catch子句参数与外部作用域变量同名
'no-class-assign': 2,//禁止给类赋值
'camelcase': 2,//强制驼峰法命名
'vars-on-top': 2,//var必须放在作用域顶部
'no-redeclare': 2,//禁止重复声明变量
'complexity': [0, 11]//循环复杂度
}
}
.gitignore 0 → 100644
浏览文件 @ 6ba358dc
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
浏览文件 @ 6ba358dc
# test1
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
config.js 0 → 100644
浏览文件 @ 6ba358dc
/**
* Created by tengteng on 17/12/27.
*/
// 服务地址
// const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock
const IP = 'http://192.168.1.54:8077'
// 请求目标服务器域名配置
const DOMAIN_NAME = {
URL_CNODEJS: IP, // 网关 服务端口
};
export default DOMAIN_NAME;
package-lock.json 0 → 100644
浏览文件 @ 6ba358dc
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ 6ba358dc
{
"name": "test1",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"element-ui": "^2.13.0",
"jquery": "^3.4.1",
"three": "^0.115.0",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2",
"wangeditor": "^3.1.1",
"websocket": "^1.0.31"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-plugin-router": "~4.2.0",
"@vue/cli-plugin-vuex": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
}
}
public/index.html 0 → 100644
浏览文件 @ 6ba358dc
<!DOCTYPE html>
<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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/room">room</router-link> |
<router-link to="/man">man</router-link> |
<router-link to="/VX">VueX</router-link> |
<router-link to="/wEdite">wangEditer</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
src/components/HelloWorld.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div class="hello">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/main.js 0 → 100644
浏览文件 @ 6ba358dc
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';
import store from './store';
import server from './services/server';
Vue.prototype.$server = server;
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: function (h) { return h(App) }
}).$mount('#app')
src/router/index.js 0 → 100644
浏览文件 @ 6ba358dc
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/About.vue')
}
},{
path: '/room',
name: 'room',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/room.vue')
}
}, {
path: '/man',
name: 'man',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/man.vue')
}
},{
path: '/VX',
name: 'VX',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/VX.vue')
}
},{
path: '/wEdite',
name: 'wEdite',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function () {
return import(/* webpackChunkName: "about" */ '../views/wEdite.vue')
}
}
]
const router = new VueRouter({
mode: 'history',
// mode: 'hash',
base: process.env.BASE_URL,
routes
})
export default router
src/services/axios.js 0 → 100644
浏览文件 @ 6ba358dc
import axios from 'axios';
// import Qs from 'qs';
import baseUrl from '../../config';
import store from '../store';
// axios.defaults.withCredentials = true;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// console.log(store.getters.getSession.session)
// config.headers.session = store.getters.getSession.session;
// 预处理请求信息（config 发出的数据） 下方是三种请求，李迪凡的
if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
// POST传参序列化
}
config.headers.token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsInJvbGVzIjoiYWRtaW4iLCJleHAiOjE1ODkzNjMyMjgsImlhdCI6MTU4ODc2MzIyOH0.tykIIEXUu-klqp-oyVXE8J2UqSBlBch_g75Injk2-R8LluLUpaicaffWBqqa05kdlWj5BSGiEhMzA9nbE6HLaA';
return config;
}, function (error) {
// 预处理请求错误（error）
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
// 预处理响应错误（error)
// alert(error);
return Promise.reject(error);
});
/**
* 返回axios方法
* @param url（如果传绝对地址则baseURL不会追加到url之前）
* @param method
* @param timeout
* @param data
* @param headers
* @param dataType
* @param responseType
* @returns {AxiosPromise}
*/
export default function(url, {
// 不传时，默认参数
method = 'get',
timeout = 60000,
data = {},
headers = {'Content-Type': 'application/json'}, // application/x-www-form-urlencoded;charset=UTF-8;
dataType = 'json',
responseType = 'blob'
}) {
const config = {
method: method,
timeout: timeout,
url: url, // 如果URL是完整的，包含域名，则下方的域名不会被拼接
baseURL: baseUrl.URL_CNODEJS, // 域名，在最外层的config.js当中可以修改，请求目标服务器域名配置，结合我们自己的项目，在项目放置到服务器上时，就是将域名替换成192.168.1.3
data: data,
headers: headers,
dataType: dataType,
responseType: responseType
};
return axios(config);
}
src/services/server.js 0 → 100644
浏览文件 @ 6ba358dc
import axios from '@/services/axios';
/**
* 统一处理所有接口请求
* 参数对象将会替换axios中默认参数中的键值对，其中可包含：
* method
* timeout
* data
* headers
* dataType
*/
// import qs from 'qs';
const server = {
getCeShi() { // 测试接口
return axios('/resume', {
method: 'get'
});
},
postadd(data) { // 新增角色
return axios('/role/add', {
method: 'post',
data: data
});
},
getDownWxj() { // 测试接口
return axios('http://172.20.10.3:8082/contact/download5', {
method: 'get',
responseType: 'blob'
});
},
}
export default server;
src/store/index.js 0 → 100644
浏览文件 @ 6ba358dc
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
wxj: {
name: 'wxj',
age: 10
},
zdz: '郑'
},
mutations: {
changeWxj(state, payload) {
state.wxj = payload.wxj;
},
changeZdz(state, payload) {
state.zdz = payload.zdz;
}
},
actions: {
changeWxj(store, payload) {
store.commit({
type: 'changeWxj',
wxj: payload
})
},
changeZdz(store, payload) {
store.commit({
type: 'changeZdz',
zdz: payload
})
}
},
getters: {
getWxj(state) {
return state.wxj;
},
getZdz(state) {
return state.zdz;
}
}
})
src/views/About.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div class="about">
<button @click="ceGet">获取数据</button>
<span>数据：{{ this.dataGet }}</span>
<button @click="upSocket">启动socket</button>
<textarea>{{ this.skD }}</textarea>
<button @click="downWxj">下载文件</button>
</div>
</template>
<script>
import $ from 'jquery';
export default {
data () {
return {
dataGet: '',
skD: []
}
},
created() {
},
mounted(){
},
methods: {
// 测试数据接口
ceGet() {
console.log('你好数据');
this.$server.getCeShi().then(res => {
console.log(res);
}).catch(err => {
console.log(err);
this.$message.error('数据请求失败');
})
},
upSocket() {
var self = this;
// Create WebSocket connection.
const socket = new WebSocket('ws://192.168.0.116:8077/webServer/wupeilin_democicd_x86');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
// console.log('Message from server ', event.data);
// var a = {
// b: event.data
// }
self.skD += event.data;
console.log(self.skD);
// 接收服务端的实时日志并添加到HTML页面中
// $("#log-container div").append(event.data);
// 滚动条滚动到最低部
// $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
});
},
downWxj() {
console.log('wxj')
this.$server.getDownWxj().then(res => {
console.log(res);
let blob = new Blob([res.data])
let downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = 'wxj.xlsx'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放blob对象
}).catch(err => {
console.log(err);
})
}
},
components: {
},
watch: {
}
}
</script>
src/views/Home.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
src/views/VX.vue 0 → 100644
浏览文件 @ 6ba358dc
<!--这是一个vuex的基础教程-->
<template>
<div class="about">
<button @click="ceGet">获取数据</button> <br/>
<span>wxj数据：{{ this.wxjGet }}</span> <br/>
<span>zdz数据：{{ this.zdzGet }}</span> <br/>
<button @click="upSocket">改变数据</button> <br/>
<span>wxj数据：{{ this.wxjData }}</span> <br/>
<span>zdz数据：{{ this.zdzData }}</span> <br/>
<button @click="delayF">改变数据1</button> <br/>
<span>wxj1数据：{{ this.wxjData1 }}</span> <br/>
<span>zdz1数据：{{ this.zdzData1 }}</span> <br/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex';
export default {
name: 'VX',
data () {
return {
wxjGet: {},
zdzGet: '',
wxjData: '',
zdzData: '',
wxjData1: '',
zdzData1: '',
skD: []
}
},
created() {
},
mounted(){
},
computed: {
...mapGetters([
'getWxj',
'getZdz'
])
},
methods: {
...mapActions([
'changeWxj'
]),
// 测试数据接口
ceGet() {
let a = this.getZdz;// 方法一
console.log(a);
this.zdzGet = a;
// console.log('你好VX', this.$store.getters.getWxj);
this.wxjGet = this.$store.getters.getWxj;// 方法二
console.log(this.wxjGet);
console.log('修改前', this.$store.state);
},
upSocket() {
console.log('问题', this.$store.state);// 问：为什么这里的打印是改变后的数据
let i = {
name: 'w',
age: 12
};
this.changeWxj(i);// 修改数据方法一
console.log('修改wxj', this.$store.state)
this.wxjData = this.$store.state.wxj;
this.$store.commit('changeZdz', { // 修改数据方法二
'zdz': 'zdz'
});
console.log('修改zdz', this.$store.state);
this.zdzData = this.$store.state.zdz;
},
delayF() {
console.log('问题', this.$store.state);// 问：为什么这里的打印是改变后的数据
let that = this;
setTimeout(function () {
let i = {
name: 'w1',
age: 121
};
that.changeWxj(i);// 修改数据方法一
console.log('修改wxj1', that.$store.state)
that.wxjData1 = that.$store.state.wxj;
that.$store.commit('changeZdz', { // 修改数据方法二
'zdz': 'zdz1'
});
console.log('修改zdz1', that.$store.state);
that.zdzData1 = that.$store.state.zdz;
},5000);
}
},
components: {
},
watch: {
}
}
</script>
src/views/man.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div>
<button @click="upMan">加载骨骼</button>
</div>
</template>
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
name: "man",
//import引入的组件需要注入到对象中才能使用
components: {},
data () { //这里存放数据
return {
renderer: '',
scene: '',
camera: '',
mesh: '',
skeleton: '',
n: 0,
T: 50,
step: 0.01
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
upMan(){
/**
* 创建场景对象Scene
*/
this.scene = new THREE.Scene();
/**
* 创建骨骼网格模型SkinnedMesh
*/
// 创建一个圆柱几何体，高度120，顶点坐标y分量范围[-60,60]
var geometry = new THREE.CylinderGeometry(5, 10, 120, 50, 300);
geometry.translate(0, 60, 0); //平移后，y分量范围[0,120]
// console.log("name", geometry.vertices); //控制台查看顶点坐标
/**
* 设置几何体对象Geometry的蒙皮索引skinIndices、权重skinWeights属性
* 实现一个模拟腿部骨骼运动的效果
*/
//遍历几何体顶点，为每一个顶点设置蒙皮索引、权重属性
//根据y来分段，0~60一段、60~100一段、100~120一段
// for (var i = 0; i < geometry.vertices.length; i++) {
// var vertex = geometry.vertices[i]; //第i个顶点
// if (vertex.y <= 60) {
// // 设置每个顶点蒙皮索引属性 受根关节Bone1影响
// geometry.skinIndices.push(new THREE.Vector4(0, 0, 0, 0));
// // 设置每个顶点蒙皮权重属性
// // 影响该顶点关节Bone1对应权重是1-vertex.y/60
// geometry.skinWeights.push(new THREE.Vector4(1 - vertex.y / 60, 0, 0, 0));
// } else if (60 < vertex.y && vertex.y <= 60 + 40) {
// // Vector4(1, 0, 0, 0)表示对应顶点受关节Bone2影响
// geometry.skinIndices.push(new THREE.Vector4(1, 0, 0, 0));
// // 影响该顶点关节Bone2对应权重是1-(vertex.y-60)/40
// geometry.skinWeights.push(new THREE.Vector4(1 - (vertex.y - 60) / 40, 0, 0, 0));
// } else if (60 + 40 < vertex.y && vertex.y <= 60 + 40 + 20) {
// // Vector4(2, 0, 0, 0)表示对应顶点受关节Bone3影响
// geometry.skinIndices.push(new THREE.Vector4(2, 0, 0, 0));
// // 影响该顶点关节Bone3对应权重是1-(vertex.y-100)/20
// geometry.skinWeights.push(new THREE.Vector4(1 - (vertex.y - 100) / 20, 0, 0, 0));
// }
// }
// 材质对象
var material = new THREE.MeshPhongMaterial({
skinning: true, //允许蒙皮动画
// wireframe:true,
});
// 创建骨骼网格模型
var SkinnedMesh = new THREE.SkinnedMesh(geometry, material);
SkinnedMesh.position.set(50, 120, 50); //设置网格模型位置
SkinnedMesh.rotateX(Math.PI); //旋转网格模型
this.scene.add(SkinnedMesh); //网格模型添加到场景中
/**
* 骨骼系统
*/
var Bone1 = new THREE.Bone(); //关节1，用来作为根关节
var Bone2 = new THREE.Bone(); //关节2
var Bone3 = new THREE.Bone(); //关节3
// 设置关节父子关系 多个骨头关节构成一个树结构
Bone1.add(Bone2);
Bone2.add(Bone3);
// 设置关节之间的相对位置
//根关节Bone1默认位置是(0,0,0)
Bone2.position.y = 60; //Bone2相对父对象Bone1位置
Bone3.position.y = 40; //Bone3相对父对象Bone2位置
// 所有Bone对象插入到Skeleton中，全部设置为.bones属性的元素
this.skeleton = new THREE.Skeleton([Bone1, Bone2, Bone3]); //创建骨骼系统
// console.log(skeleton.bones);
// 返回所有关节的世界坐标
// skeleton.bones.forEach(elem => {
// console.log(elem.getWorldPosition(new THREE.Vector3()));
// });
//骨骼关联网格模型
SkinnedMesh.add(Bone1); //根骨头关节添加到网格模型
SkinnedMesh.bind(this.skeleton); //网格模型绑定到骨骼系统
console.log(SkinnedMesh);
/**
* 骨骼辅助显示
*/
var skeletonHelper = new THREE.SkeletonHelper(SkinnedMesh);
this.scene.add(skeletonHelper);
// 转动关节带动骨骼网格模型出现弯曲效果 好像腿弯曲一样
this.skeleton.bones[1].rotation.x = 0.5;
this.skeleton.bones[2].rotation.x = 0.5;
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0x444444);
point.position.set(400, 200, 300); //点光源位置
this.scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
this.scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
this.scene.add(axisHelper);
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
this.camera.position.set(250, 300, 200); //设置相机位置
this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(width, height);//设置渲染区域尺寸
this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(this.renderer.domElement); //body元素中插入canvas对象
// this.render();
this.renderer.render(this.scene,this.camera);//执行渲染操作
var controls = new OrbitControls(this.camera, this.renderer.domElement);//创建控件对象
controls.addEventListener('change', this.render);//监听鼠标、键盘事件
},
render(){
//执行渲染操作 指定场景、相机作为参数
this.renderer.render(this.scene,this.camera);//执行渲染操作
// this.mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
// requestAnimationFrame(this.render);//请求再次执行渲染函数render
this.n += 1;
if (this.n < this.T) {
// 改变骨关节角度
this.skeleton.bones[0].rotation.x = this.skeleton.bones[0].rotation.x - this.step;
this.skeleton.bones[1].rotation.x = this.skeleton.bones[1].rotation.x + this.step;
this.skeleton.bones[2].rotation.x = this.skeleton.bones[2].rotation.x + 2 * this.step;
}
if (this.n < 2 * this.T && this.n > this.T) {
this.skeleton.bones[0].rotation.x = this.skeleton.bones[0].rotation.x + this.step;
this.skeleton.bones[1].rotation.x = this.skeleton.bones[1].rotation.x - this.step;
this.skeleton.bones[2].rotation.x = this.skeleton.bones[2].rotation.x - 2 * this.step;
}
if (this.n === 2 * this.T) {
this.n = 0;
}
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>
src/views/room.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div>
<button @click="upRoom">加载房间</button>
</div>
</template>
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
name: "room",
//import引入的组件需要注入到对象中才能使用
components: {},
data () { //这里存放数据
return {
renderer: '',
scene: '',
camera: '',
mesh: ''
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
upRoom(){
/**
* 创建场景对象Scene
*/
this.scene = new THREE.Scene();
/**
* 创建网格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(50, 100, 100); //创建一个立方体几何对象Geometry
// var material = new THREE.MeshLambertMaterial({ //材质对象Material
// color: 0x00ff00
// });
// var sphereMaterial=new THREE.MeshLambertMaterial({ //材质对象
// color:0xff0000,
// opacity:0.7,
// transparent:true
// });
var sphereMaterial=new THREE.MeshPhongMaterial({ //材质对象
color:0x0000ff,
specular:0x4488ee,
shininess:12
});
this.mesh = new THREE.Mesh(geometry, sphereMaterial); //网格模型对象Mesh
this.scene.add(this.mesh); //网格模型添加到场景中
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0x444444);
point.position.set(400, 200, 300); //点光源位置
this.scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
this.scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
this.scene.add(axisHelper);
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
this.camera.position.set(250, 300, 200); //设置相机位置
this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(width, height);//设置渲染区域尺寸
this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(this.renderer.domElement); //body元素中插入canvas对象
// this.render();
this.renderer.render(this.scene,this.camera);//执行渲染操作
var controls = new OrbitControls(this.camera, this.renderer.domElement);//创建控件对象
controls.addEventListener('change', this.render);//监听鼠标、键盘事件
},
render(){
//执行渲染操作 指定场景、相机作为参数
this.renderer.render(this.scene,this.camera);//执行渲染操作
// this.mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
// requestAnimationFrame(this.render);//请求再次执行渲染函数render
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>
src/views/wEdite.vue 0 → 100644
浏览文件 @ 6ba358dc
<template>
<div id="div1">
<p>请输入内容...</p>
</div>
</template>
<script>
import wangEditor from 'wangeditor';
export default {
data () {
return {
dataGet: '',
skD: []
}
},
created() {
},
mounted(){
this.ceGet()
},
methods: {
// 测试数据接口
ceGet() {
console.log('你好数据');
let editor = new wangEditor('#div1');
// 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
editor.customConfig.uploadImgShowBase64 = true;// 使用 base64 保存图片
// editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
editor.create();
}
},
components: {
},
watch: {
}
}
</script>
vue.config.js 0 → 100644
浏览文件 @ 6ba358dc
// vue框架配置文件
module.exports = {
// 基本路径
publicPath: './',
// 输出文件目录
outputDir: 'Drag',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
assetsDir: 'static',
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// 其他配置
// config.entry('main').add('babel-polyfill') // main是入口js文件
// 其他配置
},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
// extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: true,
host: '0.0.0.0',
port: 8088,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论